본문 바로가기

광고

Design

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

Reference

CSS

NEWS

SITE

Coding


광고

Code View/Animation

[Animaition] 다양한 기번으로 돌리면 이런 모양으로 나오네요^



캡쳐 이미지로는 알 수 없지만
미리보기를 통해 보세요~
멋진 스핀 애니메이션입니다. 
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.