效果如下所示：
收缩旋转圆环
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制作收缩圆环旋转效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
以上就是css制作收缩圆环旋转效果实例代码的详细内容，更多请关注本站其它相关文章！
