CSS

語言：

CSSSCSS

確定

html {

background: #111;

overflow: hidden;

}

#wrapper {

height: 0;

width: 0;

position: relative;

left: 50%;

top: 50vh;

margin-left: 57px;

}

.item {

position: absolute;

height: 0;

width: 0;

border: 2px solid #eee;

border-radius: 50%;

-webkit-transform: rotateY(50deg);

transform: rotateY(50deg);

top: 50%;

}

.item:nth-of-type(1) {

-webkit-animation: rotation 26s infinite -2s linear;

animation: rotation 26s infinite -2s linear;

}

.item:nth-of-type(2) {

-webkit-animation: rotation 26s infinite -4s linear;

animation: rotation 26s infinite -4s linear;

}

.item:nth-of-type(3) {

-webkit-animation: rotation 26s infinite -6s linear;

animation: rotation 26s infinite -6s linear;

}

.item:nth-of-type(4) {

-webkit-animation: rotation 26s infinite -8s linear;

animation: rotation 26s infinite -8s linear;

}

.item:nth-of-type(5) {

-webkit-animation: rotation 26s infinite -10s linear;

animation: rotation 26s infinite -10s linear;

}

.item:nth-of-type(6) {

-webkit-animation: rotation 26s infinite -12s linear;

animation: rotation 26s infinite -12s linear;

}

.item:nth-of-type(7) {

-webkit-animation: rotation 26s infinite -14s linear;

animation: rotation 26s infinite -14s linear;

}

.item:nth-of-type(8) {

-webkit-animation: rotation 26s infinite -16s linear;

animation: rotation 26s infinite -16s linear;

}

.item:nth-of-type(9) {

-webkit-animation: rotation 26s infinite -18s linear;

animation: rotation 26s infinite -18s linear;

}

.item:nth-of-type(10) {

-webkit-animation: rotation 26s infinite -20s linear;

animation: rotation 26s infinite -20s linear;

}

.item:nth-of-type(11) {

-webkit-animation: rotation 26s infinite -22s linear;

animation: rotation 26s infinite -22s linear;

}

.item:nth-of-type(12) {

-webkit-animation: rotation 26s infinite -24s linear;

animation: rotation 26s infinite -24s linear;

}

.item:nth-of-type(13) {

-webkit-animation: rotation 26s infinite -26s linear;

animation: rotation 26s infinite -26s linear;

}

@-webkit-keyframes rotation {

0% {

-webkit-transform: rotateY(50deg);

transform: rotateY(50deg);

padding: 0;

left: 0;

top: 0;

}

40% {

padding: 105px;

left: -170px;

top: -105px;

}

50% {

padding: 115px;

left: -210px;

top: -115px;

}

60% {

padding: 105px;

left: -230px;

top: -105px;

}

100% {

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

padding: 0;

left: -150px;

top: 0;

}

}

@keyframes rotation {

0% {

-webkit-transform: rotateY(50deg);

transform: rotateY(50deg);

padding: 0;

left: 0;

top: 0;

}

40% {

padding: 105px;

left: -170px;

top: -105px;

}

50% {

padding: 115px;

left: -210px;

top: -115px;

}

60% {

padding: 105px;

left: -230px;

top: -105px;

}

100% {

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

padding: 0;

left: -150px;

top: 0;

}

}

總結(jié)

以上是生活随笔為你收集整理的css 带轮廓的圆,CSS3 圆球轮廓动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。