CSS实现太极图（1个div实现）

Posted web12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS实现太极图（1个div实现）相关的知识，希望对你有一定的参考价值。

使用一个div实现太极图的步骤如下：

html部分：

<body>
    <div class="box-taiji">
    </div>
</body>

第一步，结合border实现左黑右白的正方形，加上圆角、阴影。代码如下;

.box-taiji{
            width:0;
            height:300px;
            position:relative;
            margin: 50px auto;
            border-left:150px solid #000;
            border-right:150px solid #fff;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            border-radius: 300px;
        }

效果如下：

 技术分享图片

第二步，通过伪类，实现一个一个白色的圆形，定位好位置。同时，利用box-shadow:0 200px 0 #000;实现同样大小的圆，放好。

.box-taiji:after{
            width:150px;
            height:150px;
            position:absolute;
            content: ‘‘;
            display: block;
            top:0;
            left:-75px;
            z-index: 1;
            background-color: #fff;
            border-radius:50%;
            box-shadow:0 150px 0 #000;
        }

 

先后实现的效果如下：

技术分享图片技术分享图片

 

第三步，同样第二步一样的原理，再实现黑白两个圆，放到相关的位置。

.box-taiji:before {
            content:‘‘;
            position:absolute;
            display: block;
            width:75px;
            height:75px;
            top:38px;
            left:-38px;
            z-index:2;
            background-color:#000;
            border-radius:50%;
            box-shadow:0 150px 0 #fff;
        }

 

最终效果如下：

技术分享图片

 

和用上一篇3个div实现太极图一样，我们也可以通过CSS3动画实现旋转太极图。

以上是关于CSS实现太极图（1个div实现）的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 实现太极图案

太极图----三层div实现（非伪类）

web实现太极图背景色线性渐变旋转动画htmlcssafterbeforelineargradienttransformrotateanimation

css3制作旋转的太极图

太极图----伪类实现

Html5+Css+JavaScript实现太极动画，自带音效与动画！