標籤：style blog http color io os ar for strong
效果預覽：
PS：
1、昨天用3個DIV實現了太極圖（點擊查看），，今天試著用1個Div來做。
2、公司剛忙過雙10周年慶，最近空閑下來，閑著也是閑著，總得寫點東西吧。
3、高手莫噴，小弟僅僅是沒事折騰一下，做個的記錄。
4、有網友反應旋轉的時候會卡。
5、IE瀏覽器，出門左拐、走好不送 ~~~
實現步驟：
HTML：
<div class="box-taiji"></div>
步驟一：
.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;}
結合border實現左黑右白的正方形，加上圓角、陰影。 PS：剛開始的時候用background-image:linear-gradient(left, #000 50%, #fff 50%);來實現黑邊圓形。IE10下測試不行。所以用了border。
步驟二：
.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;}.box-taiji:after {width:200px;height:200px;position:absolute;content:"";display:block;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;}
加上偽類，實現一個一個白色的圓形，定位好位置。
.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;}.box-taiji:after {width:200px;height:200px;position:absolute;content:"";display:block;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}
利用box-shadow:0 200px 0 #000;實現同樣大小的圓，放好。
步驟三：
.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;}.box-taiji:before,.box-taiji:after {position:absolute;content:"";display:block;}.box-taiji:before {width:200px;height:200px;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;}
同樣步驟二一樣的原理，再實現黑白兩個圓，放到相關的位置。我們的太極圖就畫好了，下面的任務就是動起來~~
步驟四：
.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}.box-taiji:before,.box-taiji:after {position:absolute;content:"";display:block;}.box-taiji:before {width:200px;height:200px;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;}@keyframes rotation { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);}}@-webkit-keyframes rotation { 0% {-webkit-transform:rotate(0deg);} 100% {-webkit-transform:rotate(-360deg);}}@-moz-keyframes rotation { 0% {-moz-transform:rotate(0deg);} 100% {-moz-transform:rotate(-360deg);}}
加上@keyframes、animation等CSS3動畫效果，OK，搞定。。
原理解析：
我們先把背景顏色調一下，原理一下子就清晰了。。其實就是：兩個半圓在最下面，四個小圓利用定位疊加上去。
完整代碼：
<!doctype html><html><head><meta charset="utf-8"><title>CSS3實現旋轉的太極圖（二）：只用1個DIV</title><style>/* 利用background-image實現左黑右白的圓，IE下測試不太理想 *//* .box-taiji {width:400px;height:400px;position:relative;margin:30px auto;border-radius:400px;box-shadow:0 0 30px rgba(0,0,0,.5);background-image:linear-gradient(left, #000 50%, #fff 50%);background-image:-webkit-linear-gradient(left, #000 50%, #fff 50%);background-image:-moz-linear-gradient(left, #000 50%, #fff 50%);}.box-taiji:before,.box-taiji:after {position:absolute;content:"";display:block;}.box-taiji:before {width:200px;height:200px;top:0;left:100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}.box-taiji:after {width:60px;height:60px;top:70px;left:170px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;} */ .box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}.box-taiji:before,.box-taiji:after {position:absolute;content:"";display:block;}.box-taiji:before {width:200px;height:200px;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;}@keyframes rotation { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);}}@-webkit-keyframes rotation { 0% {-webkit-transform:rotate(0deg);} 100% {-webkit-transform:rotate(-360deg);}}@-moz-keyframes rotation { 0% {-moz-transform:rotate(0deg);} 100% {-moz-transform:rotate(-360deg);}}</style></head><body><div class="box-taiji"></div></body></html>
CSS3實現旋轉的太極圖（二）：只用1個DIV
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
