纯CSS实现画太极图的方法

下面分享一个利用CSS代码实现画太极图的方法，有需要的拿出吧。

CSS画太极图的方法

css画太极太只需要一个DIV元素即可，不过要多添加两个伪类选择器并进行相对定位！

<!-- 73so.com -->
<style>
    .m{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        padding: 10px;
    }
    #taiji {
        width: 96px;
        height: 48px;
        background: #fff;
        border-style: solid;
        border-width: 0px 0px 50px 0px;
        border-radius: 100%;
        position: relative;
    }
    #taiji:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #fff;
        border: 18px solid #000;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
    #taiji:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: #000;
        border: 18px solid #fff;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
</style>
<div class="m">
    <div id="taiji"></div>
</div>

实现效果

CSS画太极图并旋转的方法

上面的示例中通过css代码画出了一个太极图，然太极图是静止的。如果想要炫酷一点，可以再添加一些CSS的动画效果，将太极图旋转起来，下面是示例代码。

#taiji {
    width: 96px;
    height: 48px;
    background: #fff;
    border-style: solid;
    border-width: 0px 0px 50px 0px;
    border-radius: 100%;
    position: relative;
    animation:rotation 2.5s linear infinite;
    -webkit-animation:rotation 2.5s linear infinite;
    -moz-animation:rotation 2.5s linear infinite;
}
/*省略代码参考上面例子*/
@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);}
}