该浏览器不支持canvas

CSS实现太极效果

这个伪元素的位置对齐还妹搞明白 需要再研究研究

 

 
<html>
    <head>
        <title>taiji</title>
        <style>
            body{
                background-color: antiquewhite;
            }
            .box-taiji{
                z-index: 0;
                width: 0;
                height: 300px;
                position: relative;
                margin: 50px auto;
                border-left: 150px solid #000;
                border-right: 150px solid #fff;
                border-radius: 150px;
                -webkit-transition-property: -webkit-transform;
                -webkit-transition-duration: 1s;
                -moz-transition-property: -moz-transform;
                -moz-transition-duration: 1s;
                -webkit-animation: rotate 3s linear infinite;
                -moz-animation: rotate 3s linear infinite;
                -o-animation: rotate 3s linear infinite;
                animation: rotate 3s linear infinite;
            }
            @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
                to{-webkit-transform: rotate(360deg)}
            }
            @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
                to{-moz-transform: rotate(359deg)}
            }
            @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
                to{-o-transform: rotate(359deg)}
            }
            @keyframes rotate{from{transform: rotate(0deg)}
                to{transform: rotate(359deg)}
            }
            .box-taiji::after{
                z-index: 1;
                width: 150px;
                height: 150px;
                position: absolute;
                top: 0;
                left: -80px;
                content: '';
                display: block;
                background:#000;
                border-radius: 75px;
                box-shadow: 0 150px 0 #fff;
            }
            .box-taiji::before{
                content:'';
                position: absolute;
                display: block;
                width:50px;
                height:50px;
                left: -30px;
                top: 45px;
                z-index:2;
                background-color:#fff;
                border-radius:50%;
                box-shadow:0 150px 0 #000;
            }
        </style>
    </head>
    <body>
        <div class="box-taiji">
        </div>
    </body>
</html>

 

posted @ 2019-08-29 10:28  真是啰嗦  阅读(428)  评论(0)    收藏  举报