이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/

티스토리 뷰



캡쳐 이미지로는 알 수 없지만
미리보기를 통해 보세요~
멋진 스핀 애니메이션입니다. 
keyframe은 다음과 같이 설정하면 됩니다.

@keyframes spin
  0%
    transform: rotate( 0deg ) scale(1)
    border-radius: 50%
  50%
    transform: rotate(720deg) scale(.7)
    border-radius: 100%
  100%
    transform: rotate( 1440deg ) scale(1)
    border-radius: 100%
  
@keyframes spin-child1
  0%
    transform: rotate( 0deg ) scale(1)
  
  50%
    transform: rotate(700deg) scale(.7)
  
  100%
    border-radius: 50%
    transform: rotate( -1000deg ) scale(1)
  

@keyframes spin-child2
  0%
    transform: rotate( 0deg ) scale(.5)
    border-radius: 50%
  
  50%
    transform: rotate(700deg) scale(.7)
  
  100%
    border-radius: 0%
    transform: rotate( 1400deg ) scale(.5)




See the Pen Simple CSS Animation Spinner by Jose Luis Quintana (@joseluisq) on CodePen.









이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/
댓글
댓글쓰기 폼