css地球月亮太陽環繞旋轉
分享一段程式碼例項,它使用css3實現了地球、月亮和太陽圍繞旋轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ background: #000; } .sun{ width: 280px; height: 280px; margin-top: 200px; margin-left: 300px; border:1px solid #FFA500; background:#FFA500; border-radius: 50%; box-shadow:0px 0px 35px #FFA500; animation:action 10s; animation-iteration-count:infinite; animation-timing-function:linear; } @keyframes action{ 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg)} } .earth{ border:1px solid #0000CC; background:#0000CC; box-shadow:0px 0px 35px #0000CC; width: 40px; height: 40px; border-radius: 50%; margin-left: -90px; animation:actions 5s; animation-iteration-count:infinite; animation-timing-function:linear; } @keyframes actions{ 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg)} } .moon{ border:1px solid #F0F0F0; background:#F0F0F0; box-shadow:0px 0px 35px #F0F0F0; width: 10px; height: 10px; border-radius: 50%; margin-left: -20px; } </style> </head> <body> <div class="sun"> <div class="earth"> <div class="moon"></div> </div> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).border-radius參閱CSS3 border-radius一章節。
(2).box-shadow參閱CSS3 box-shadow一章節。
(3).animation參閱CSS3 animation一章節。
(4).@keyframes參閱CSS3 @keyframes一章節。
相關文章
- canvas實現太陽、地球和月亮旋轉效果Canvas
- Python模擬太陽-地球-月亮運動模型Python模型
- CSS3 太陽系星球旋轉效果CSSS3
- CSS3元素環繞另一個元素旋轉CSSS3
- HTML+CSS實現太極旋轉效果HTMLCSS
- Flash遮罩做地球旋轉效果遮罩
- canvas 圍繞中心旋轉Canvas
- css3實現環狀旋轉效果CSSS3
- CSS 文字環繞圖片CSS
- canvas 圖形圍繞中心旋轉Canvas
- canvas旋轉太極圖效果Canvas
- CSS3 旋轉太極八卦圖程式碼例項CSSS3
- CSS文字環繞圖片效果CSS
- CSS 邊框動態環繞CSS
- unity 模型無法繞自身中心旋轉Unity模型
- svg矩形圍繞自身中心旋轉效果SVG
- 《流浪地球2》太陽風暴要來了?亞馬遜雲科技帶你看神秘宇宙!亞馬遜
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- Games101:繞任意軸旋轉GAM
- 我的部落格--群星閃爍地球旋轉動畫特效動畫特效
- CSS 彎彎的月亮效果CSS
- CSS3小球靜態環繞效果CSSS3
- canvas繪製太陽系Canvas
- 一個太陽系HTMLHTML
- canvas實現的旋轉太極圖效果Canvas
- three.js實現的地球3D旋轉效果JS3D
- 旋轉文字的CSS程式碼CSS
- CSS 3D旋轉效果CSS3D
- CSS3 旋轉魔方效果CSSS3
- CSS3動畫(360度旋轉、旋轉放大、放大、移動)CSSS3動畫
- CSS3邊框動態環繞效果CSSS3
- CSS3環繞動態邊框效果CSSS3
- 太陽(藍橋杯14屆)
- CSS動畫之旋轉魔方輪播CSS動畫
- CSS3圖片旋轉效果CSSS3
- CSS3多面體旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- 變形元素旋轉css陰影CSS