티스토리 뷰

 

 

 

규칙성를 이용해서 만든 것은 아닌 것 같습니다.
만든 사람도 만들다 보니 이렇게 나온거 같습니다^^

.n1 {
  animation:anim 2.10s infinite linear;
  -webkit-animation:anim 2.10s infinite linear;
  -moz-animation:anim 2.10s infinite linear;
  -ms-animation:anim 2.10s infinite linear;
  -o-animation:anim 2.10s infinite linear;
}
.n2 {
  animation:anim 2.12s infinite linear;
  -webkit-animation:anim 2.12s infinite linear;
  -moz-animation:anim 2.12s infinite linear;
  -ms-animation:anim 2.12s infinite linear;
  -o-animation:anim 2.12s infinite linear;
}
.n3 {
  animation:anim 2.13s infinite linear;
  -webkit-animation:anim 2.13s infinite linear;
  -moz-animation:anim 2.13s infinite linear;
  -ms-animation:anim 2.13s infinite linear;
  -o-animation:anim 2.13s infinite linear;
}
.n4 {
  animation:anim 2.14s infinite linear;
  -webkit-animation:anim 2.14s infinite linear;
  -moz-animation:anim 2.14s infinite linear;
  -ms-animation:anim 2.14s infinite linear;
  -o-animation:anim 2.14s infinite linear;
}
.n5 {
  animation:anim 2.15s infinite linear;
  -webkit-animation:anim 2.15s infinite linear;
  -moz-animation:anim 2.15s infinite linear;
  -ms-animation:anim 2.15s infinite linear;
  -o-animation:anim 2.15s infinite linear;
}
.n6 {
  animation:anim 2.16s infinite linear;
  -webkit-animation:anim 2.16s infinite linear;
  -moz-animation:anim 2.16s infinite linear;
  -ms-animation:anim 2.16s infinite linear;
  -o-animation:anim 2.16s infinite linear;
}
.n7 {
  animation:anim 2.17s infinite linear;
  -webkit-animation:anim 2.17s infinite linear;
  -moz-animation:anim 2.17s infinite linear;
  -ms-animation:anim 2.17s infinite linear;
  -o-animation:anim 2.17s infinite linear;
}
.n8 {
  animation:anim 2.18s infinite linear;
  -webkit-animation:anim 2.18s infinite linear;
  -moz-animation:anim 2.18s infinite linear;
  -ms-animation:anim 2.18s infinite linear;
  -o-animation:anim 2.18s infinite linear;
}
.n9 {
  animation:anim 2.19s infinite linear;
  -webkit-animation:anim 2.19s infinite linear;
  -moz-animation:anim 2.19s infinite linear;
  -ms-animation:anim 2.19s infinite linear;
  -o-animation:anim 2.19s infinite linear;
}
.n10 {
  animation:anim 2.20s infinite linear;
  -webkit-animation:anim 2.20s infinite linear;
  -moz-animation:anim 2.20s infinite linear;
  -ms-animation:anim 2.20s infinite linear;
  -o-animation:anim 2.20s infinite linear;
}

10단계로 나누어서 모션을 주었네요^^

[미리보기]

 

 

See the Pen Border rotate by hacker59 (@stan59) on CodePen.

 

 




 






댓글
댓글쓰기 폼