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; } .taiji { margin: 100px auto; width: 96px; height: 48px; background-color: #fff; border-color: #271CF3; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } .taiji:before { position: absolute; content: ''; top: 50%; left: 0; width: 12px; height: 12px; background-color: #fff; border: 18px solid #271CF3; border-radius: 100%; } .taiji:after { position: absolute; content: ''; top: 50%; left: 50%; width: 12px; height: 12px; background-color: #271CF3; border: 18px solid white; border-radius: 100%; } </style> </head> <body> <div class="taiji"></div> </body> </html>
相關文章
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- CSS3繪製太極圖程式碼例項詳解CSSS3
- canvas實現的旋轉的太極圖效果程式碼例項Canvas
- CSS3 旋轉太極八卦圖程式碼例項CSSS3
- CSS3實現的梯形圖案程式碼例項CSSS3
- css3實現的谷歌瀏覽器圖示程式碼例項CSSS3谷歌瀏覽器
- css3實現的天氣型別圖示程式碼例項CSSS3型別
- css3實現的折角效果程式碼例項CSSS3
- css3實現tab選項卡程式碼例項CSSS3
- css3實現的多重邊框程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的進度條程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的開關按鈕程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- css3實現的瀑布流佈局程式碼例項CSSS3
- CSS3實現的禁止文字選中程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- CSS3實現的平行四邊形程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- css3實現平行四邊形程式碼例項CSSS3
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- CSS3實現的3D旋轉程式碼例項CSSS33D
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的漸變線交錯程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- CSS3圖層陰影程式碼例項CSSS3