CSS3星系旋轉效果代
分享一段程式碼例項,它模擬實現了星系行星圍繞著恆星旋轉的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding: 0; margin: 0; } body { width: 100%; height: 100%; background-color: #080e24; } ul { height: 600px; width: 600px; margin: 50px auto; list-style: none; } ul li { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #333333; } li:nth-child(1) { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 50px #B3C04C; background-color: #B3C04C; } li:nth-child(2) { width: 120px; height: 120px; border-radius: 50%; animation: rotate 30s linear infinite; } li:nth-child(2) span { width: 15px; height: 15px; border-radius: 50%; background-color: red; position: absolute; top: 0; left: 25px; } li:nth-child(3) { width: 180px; height: 180px; border-radius: 50%; animation: rotate 20s linear infinite; } li:nth-child(3) span { width: 20px; height: 20px; border-radius: 50%; background-color: green; position: absolute; top: 0; left: 35px; } li:nth-child(4) { width: 240px; height: 240px; border-radius: 50%; animation: rotate 20s linear infinite; } li:nth-child(4) span { width: 18px; height: 18px; border-radius: 50%; background-color: deepskyblue; position: absolute; top: 0; left: 60px; } li:nth-child(5) { width: 300px; height: 300px; border-radius: 50%; animation: rotate 10s linear infinite; } li:nth-child(5) > span { width: 25px; height: 25px; border-radius: 50%; background-color: #6dff39; position: absolute; top: 0; left: 135px; animation: rotate 10s linear infinite; } li:nth-child(5) > span span { width: 10px; height: 10px; border-radius: 50%; background-color: #ff40c0; position: absolute; top: 0; left: 30px; } li:nth-child(6) { width: 360px; height: 360px; border-radius: 50%; animation: rotate 30s linear infinite; } li:nth-child(6) span { width: 10px; height: 10px; border-radius: 50%; background-color: #faff27; position: absolute; top: 0; left: 130px; } li:nth-child(7) { width: 420px; height: 420px; border-radius: 50%; animation: rotate 40s linear infinite; } li:nth-child(7) > span { width: 25px; height: 25px; border-radius: 50%; background-color: #801377; position: absolute; top: 0; left: 190px; animation: rotate 15s linear infinite; } li:nth-child(7) > span span { width: 10px; height: 10px; border-radius: 50%; background-color: #4afff8; position: absolute; top: 0; left: 30px; } li:nth-child(8) { width: 480px; height: 480px; border-radius: 50%; animation: rotate 10s linear infinite; } li:nth-child(8) span { width: 15px; height: 15px; border-radius: 50%; background-color: #3f8042; position: absolute; top: 0; left: 175px; } li:nth-child(9) { width: 540px; height: 540px; border-radius: 50%; } @keyframes rotate { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } } </style> </head> <body> <ul> <li></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span><span></span></span></li> <li><span></span></li> <li><span><span></span></span></li> <li><span></span></li> <li></li> </ul> </body> </html>
相關文章
- 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實現的立方體旋轉效果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
- 卡片旋轉動畫效果動畫
- CSS3實現的div元素旋轉一定角度效果CSSS3
- | / - 的旋轉效果實現(轉)
- css3實現動態摺疊生成立方體旋轉效果CSSS3