zoukankan      html  css  js  c++  java
  • 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动画实现旋转太极图。

  • 相关阅读:
    Revit扩展组件介绍之_AdWindow
    PropertyGrid使用总结5 UITypeEditor
    PropertyGrid使用总结4 IcustomTypeDescriptor
    PropertyGrid使用总结3 Descriptor
    PropertyGrid使用总结2 TypeConverter
    JavaScript之Ajax学习
    JavaScript正则表达式
    JavaScript面向对象学习笔记
    node入门学习1
    JavaScript随笔8
  • 原文地址:https://www.cnblogs.com/web12/p/10041363.html
Copyright © 2011-2022 走看看