html圆环旋转效果,css制作收缩圆环旋转效果实例代码

效果如下所示：

收缩旋转圆环

css代码：

body {

background: #372940;

}

.demo {

position: relative;

margin: 120px auto;

width: 150px;

}

.loader {

position: absolute;

opacity: .7;

}

.loader circle {

-webkit-animation: draw 4s infinite ease-in-out;

animation: draw 4s infinite ease-in-out;

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.loader-2 circle,

.loader-6 circle {

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.loader-7 circle {

-webkit-animation-delay: 2s;

animation-delay: 2s;

}

.loader-4 circle,

.loader-8 circle {

-webkit-animation-delay: 3s;

animation-delay: 3s;

}

.loader-3 {

left: -150px;

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.loader-6,

.loader-7,

.loader-8 {

left: -150px;

-webkit-transform: rotateX(180deg) rotateY(180deg);

transform: rotateX(180deg) rotateY(180deg);

}

.loader-5 circle {

opacity: .2;

}

@-webkit-keyframes draw {

50% {

stroke-dashoffset: 0;

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

}

@keyframes draw {

50% {

stroke-dashoffset: 0;

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

}

代码：

总结

以上所述是小编给大家介绍的css制作收缩圆环旋转效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！