CSS3畫八卦太極圖（繞一個圓旋轉）

html代碼：
<div class="mydiv2">

    <div class="div2"></div>

</div>

css代碼：

@-webkit-keyframes action2{                                        /*動畫*/
            100%{transform:rotate(360deg);}
        }
        .div2{
            width: 200px;
            height: 100px;
            left: 200px;
            background-color: #fff;
            border-bottom: 100px solid #000;
            border-radius: 50%;
            position: relative;
            transform-origin:100px 300px;
            -webkit-animation:action2 3s linear 0.1s infinite;


        }
        .div2:before{
            content: "";
            width: 36px;
            height: 36px;
            border: 32px solid #000;
            background-color: #fff;
            position: absolute;
            top: 50px;
            border-radius: 50%;
        }
        .div2:after{
            content: "";
            width: 36px;
            height: 36px;
            border: 32px solid #fff;
            background-color: #000;
            position: absolute;
            top: 50px;
            left: 100px;
            border-radius: 50%;
        }
        .mydiv2{
            width: 600px;
            height: 600px;
            border: 1px solid #009900;
            border-radius: 50%;
        }