css
css 带轮廓的圆,css3 圆球轮廓动画 -凯发ag旗舰厅登录网址下载
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;
}
}
总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的css 带轮廓的圆,css3 圆球轮廓动画的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇：
- 下一篇：