CSS3 圆环内部旋转效果
分类:实例代码
CSS3 圆环内部旋转效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了圆环内部旋转效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .warp { width: 200px; height: 200px; position: relative; margin: 0 auto; } .right { width: 100px; height: 200px; position: absolute; right: 0; overflow: hidden; } .left { width: 100px; height: 200px; position: absolute; left: 0; overflow: hidden; } .right .right_circle { width: 160px; height: 160px; border-radius: 50%; border: 20px solid green; position: absolute; right: 0; animation: start_right 5s linear; } .left .left_circle { width: 160px; height: 160px; border-radius: 50%; border: 20px solid green; animation: start_left 5s linear; } @keyframes start_right { 0% { border-top: 20px solid #547BC9; border-right: 20px solid #547BC9; border-left: 20px solid #66CDAA; border-bottom: 20px solid #66CDAA; transform: rotate(45deg); } 50% { border-top: 20px solid #547BC9; border-right: 20px solid #547BC9; border-bottom: 20px solid #66CDAA; border-left: 20px solid #66CDAA; transform: rotate(225deg); } } @keyframes start_left { 50% { border-top: 20px solid #547BC9; border-right: 20px solid #547BC9; border-bottom: 20px solid #66CDAA; border-left: 20px solid #66CDAA; transform: rotate(225deg); } 100% { border-top: 20px solid green; border-right: 20px solid green; border-bottom: 20px solid green; border-left: 20px solid green; transform: rotate(45deg); } } </style> </head> <body> <div class="warp"> <div class="right"> <div class="right_circle"></div> </div> <div class="left"> <div class="left_circle"></div> </div> </div> </body> </html>
上面的代码实现了我们的要求,代码很简单,更多内容参阅相关阅读。
相关阅读:
(1).animation参阅CSS3 animation一章节。
(2).border-radius参阅CSS3 border-radius一章节。
(3).@keyframes参阅CSS3 @keyframes一章节。
(4).transform: rotate()参阅transform: rotate()一章节。
CSS3 圆环内部旋转效果,这样的场景在实际项目中还是用的比较多的,关于CSS3 圆环内部旋转效果就介绍到这了。