css3實現旋轉的太極圖效果程式碼例項
下面分享一段程式碼例項,它使用css3實現了太極圖的效果。
並且能夠自動旋轉,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-family: "mircoft yahei"; font-size: 14px; font-size: 1.4rem; line-height: 1; height: 1500px; } .taiji { margin: 100px auto; width: 500px; height: 260px; background-color: #fff; border-color: #000; border-style: solid; border-width: 2px 2px 250px 2px; border-radius: 100%; position: relative; animation: myfirst 5s ease-in-out 0s infinite; /* Firefox: */ -moz-animation: myfirst 5s ease-in-out 0s infinite; /* Safari 和 Chrome: */ -webkit-animation: myfirst 5s ease-in-out 0s infinite; /* Opera: */ -o-animation: myfirst 5s ease-in-out 0s infinite; } .taiji:before { position: absolute; content: ''; top: 50%; left: 0; width: 50px; height: 50px; background-color: #fff; border: 100px solid #000; border-radius: 100%; } .taiji:after { position: absolute; content: ''; top: 50%; left: 50%; width: 50px; height: 50px; background-color: #000; border: 100px solid #fff; border-radius: 100%; } @keyframes myfirst { 0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes myfirst { 0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-moz-keyframes myfirst { 0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-ms-keyframes myfirst { 0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } </style> </head> <body> <div class="taiji"></div> </body> </html>
相關文章
- canvas實現的旋轉的太極圖效果程式碼例項Canvas
- CSS3 旋轉太極八卦圖程式碼例項CSSS3
- css3實現的太極圖程式碼例項CSSS3
- canvas實現的旋轉太極圖效果Canvas
- css3實現的旋轉魔方效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- canvas旋轉太極圖效果Canvas
- HTML+CSS實現太極旋轉效果HTMLCSS
- CSS3實現的環形旋轉載入補全效果程式碼例項CSSS3
- CSS3實現的3D旋轉程式碼例項CSSS33D
- CSS3繪製太極圖程式碼例項詳解CSSS3
- css3實現的折角效果程式碼例項CSSS3
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- 3D旋轉效果程式碼例項3D
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- CSS3 太陽系星球旋轉效果CSSS3
- css實現的div旋轉簡單程式碼例項CSS
- CSS3實現的梯形圖案程式碼例項CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- javascript元素3D旋轉效果程式碼例項JavaScript3D
- CSS實現的柱狀圖效果例項程式碼CSS
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現的動物頭像效果程式碼例項CSSS3