css3沿圆环运动,CSS3 圆环变换

CSS

语言：

CSSSCSS

确定

html {

background: #181818;

}

.ring {

position: absolute;

top: 50%;

left: 50%;

margin: -8.75em;

width: 17.5em;

height: 17.5em;

border-radius: 50%;

box-shadow: inset #f0d7b4 0 0 0 0.5em;

animation: a 2s cubic-bezier(0.86, 0, 0.07, 1) infinite alternate;

}

.ring:nth-child(1) {

animation-name: ani1, thickness;

}

@keyframes ani1 {

from {

transform: rotate(22.5deg) translate(6.5625em);

}

to {

transform: rotate(22.5deg) translate(0);

}

}

.ring:nth-child(2) {

animation-name: ani2, thickness;

}

@keyframes ani2 {

from {

transform: rotate(67.5deg) translate(6.5625em);

}

to {

transform: rotate(67.5deg) translate(0);

}

}

.ring:nth-child(3) {

animation-name: ani3, thickness;

}

@keyframes ani3 {

from {

transform: rotate(112.5deg) translate(6.5625em);

}

to {

transform: rotate(112.5deg) translate(0);

}

}

.ring:nth-child(4) {

animation-name: ani4, thickness;

}

@keyframes ani4 {

from {

transform: rotate(157.5deg) translate(6.5625em);

}

to {

transform: rotate(157.5deg) translate(0);

}

}

.ring:nth-child(5) {

animation-name: ani5, thickness;

}

@keyframes ani5 {

from {

transform: rotate(202.5deg) translate(6.5625em);

}

to {

transform: rotate(202.5deg) translate(0);

}

}

.ring:nth-child(6) {

animation-name: ani6, thickness;

}

@keyframes ani6 {

from {

transform: rotate(247.5deg) translate(6.5625em);

}

to {

transform: rotate(247.5deg) translate(0);

}

}

.ring:nth-child(7) {

animation-name: ani7, thickness;

}

@keyframes ani7 {

from {

transform: rotate(292.5deg) translate(6.5625em);

}

to {

transform: rotate(292.5deg) translate(0);

}

}

.ring:nth-child(8) {

animation-name: ani8, thickness;

}

@keyframes ani8 {

from {

transform: rotate(337.5deg) translate(6.5625em);

}

to {

transform: rotate(337.5deg) translate(0);

}

}

@keyframes thickness {

to {

box-shadow: inset #f0d7b4 0 0 0 1em;

}

}