CSS3 圓環內部旋轉效果
分享一段程式碼例項,它實現了圓環內部旋轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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()一章節。
相關文章
- SVG實現的圓環旋轉效果SVG
- CSS3 旋轉魔方效果CSSS3
- CSS3圓環效果程式碼CSSS3
- CSS3圖片旋轉效果CSSS3
- CSS3多面體旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- CSS3旋轉載入等待效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- CSS3滑鼠懸浮div旋轉效果CSSS3
- css3實現環狀旋轉效果CSSS3
- CSS3旋轉風車效果程式碼CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3 3d旋轉魔方效果CSSS33D
- CSS3 太陽系星球旋轉效果CSSS3
- CSS3旋轉大風車效果詳解CSSS3
- CSS3扇形旋轉效果詳解CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- css3點狀旋轉載入等待效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- CSS3圓形旋轉變大動畫效果CSSS3動畫
- css3實現的立方體旋轉效果CSSS3
- CSS3花瓣狀360度不停旋轉效果CSSS3
- 簡單的css3頭像旋轉與3D旋轉效果CSSS33D
- CSS3立方體3D旋轉效果CSSS33D
- CSS3 螺旋旋轉黑白相間條紋效果CSSS3
- CSS3實現的3D旋轉效果CSSS33D
- css3實現的旋轉載入等待效果CSSS3
- css3實現旋轉loadding載入效果CSSS3
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- CSS3實現的小球旋轉載入等待效果CSSS3
- css3實現的3D立體旋轉效果CSSS33D
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的loadding旋轉載入效果CSSS3
- css3實現的立方體3D旋轉效果CSSS33D
- 自定義圓環,跟隨手指旋轉角度加減layer
- 卡片旋轉動畫效果動畫
- CSS3實現的div元素旋轉一定角度效果CSSS3