Custom Music Player (3) CSS 이미지 위치, rotate

이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

 

 

/* Image */
.img-container {
  position: relative;
  width: 110px;
}

.img-container img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: -60px;
  left: 20px;
  animation: rotate 3s linear infinite;
  animation-play-state: paused;
}

.music-container.play .img-container img {
  animation-play-state: running;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

 

img-container에 position:relative를 준다.

 

 

img에 position:absolute를 주고

top, left로 img-container 속 위치를 정한다

 

 

img에 object-fit:cover를 하면 이미지가 과하게(;;) 늘어나거나 줄어들지 않고

높이, 너비, border-radius에 맞게 출력

 

 

 

 

 

음악이 play되는 동안 이미지가 360도 돌아가는 animation을 넣고 싶을 때,

 

animation 이름: rotate

animation duration 시간 3초인데

진행 속도는 linear 즉, 처음부터 끝까지 일정하게

infinite이면 animation 한 번만 하는 게 아니라 계~~~ 속

 

근데 일단 animation-play-state를 paused로 해놓고

 

music-container에 play라는 class가 추가되면, 

img의 animation-play-state를 running으로 바꿔준다.

 

 

그럼 @keyframes로 그 animation이 어떻게 진행될지 정해보면

0deg로 시작해서 360deg rotate하는 걸로.