使用三個div實現太極圖的步驟如下：

HTML部分

<div class="box">
        <div class="yin"></div>
        <div class="yang"></div>
    </div>

第一步，畫一個寬高為300px的圓，并為其加上陰影（為了看起來有立體感）

.box{
            width:300px;
            height:300px;
            margin:50px auto;
            position:relative;
            box-shadow:0 0 50px rgba(0,0,0,.8);
            background: #000;
            border-radius: 50%;
　　　　　　/*下面為實現旋轉時所需代碼*/　

　　　　　　/*animation:rotation 2.5s linear infinite;
　　　　　　-webkit-animation:rotation 2.5s linear infinite;
　　　　　　-moz-animation:rotation 2.5s linear infinite;*/

        }

出來的效果如下：

第二步，利用偽類實現左右兩個半圓，一黑一白。寬為150px，高為300px;（這里我先設置為紅藍兩色）

.box:before,
        .box:after{
            content:'';
            display: block;
            width:150px;
            height:300px;
            /*position:absolute;*/
            /*top:0;*/
        }
        .box:before{
            border-radius:150px 0 0 150px;
            background-color: red;
            left:0;
        }
        .box:after{
            border-radius:0 150px 150px 0;
            background-color: blue;
            /*right: 0;*/
        }

在沒有進行定位時，效果如下：

通過定位可以實現底圖的陰陽分隔效果。

第三步，依次畫兩個寬高都為200px的圓，一黑一白。上下定位。

.yin,.yang{
            position: absolute;
            width:150px;
            height:150px;
            border-radius: 50%;
            left:75px;
            z-index: 99;
        }
        .yin{
            background:#000;
            top:0;
        }
        .yang{
            background: #fff;
            top:150px;
        }

其效果如下：

第四步，利用偽類實現最小的兩個黑白小圓，并通過定位實現布局效果。

.yin:after,.yang:after{
            width:75px;
            height:75px;
            border-radius: 50%;
            position: absolute;
            z-index: 999;
            display: block;
            content: '';
            left:25%;
            top:25%;
        }
        .yin:after{
            background:#fff;
        }
        .yang:after{
            background: #000;
        }

將底圖樣色做相應修改，得到最終效果如下：

繪制出太極圖后我們可以通過CSS3中的@keyframes、animation動畫實現旋轉的太極圖，具體代碼如下：

@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);}
        }

總結

以上是生活随笔為你收集整理的CSS实现太极图（3个div实现）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。