用CSS3做了一个炫酷的太极八卦图

分享 :
标签: css3特效 前端开发 前端特效

效果预览

代码:

<html>
    <head>
    <title>我的练习</title>
        <style>
            #box{width:400px;height:400px;border:1px solid black;border-radius:100%;
            margin:30px auto;background:linear-gradient(black 50%,white 50%);display:flex;
            line-height:400px;align-items:center;}
            .right,.left{width:50px;height:50px;border-radius:100%;
            }
            .right{background:black;
            border:75px solid white;
            animation:change 1s infinite alternate linear;
            animation-delay:-1s;
            transform-origin:100% 50%;
            }
            .left{background:white;
            border:75px solid black;
            animation:change 1s infinite alternate linear;
            transform-origin:0% 50%;}
            @keyframes change{
            from{transform:scale(0.5)}
            to{transform:scale(1.5)}
            }

        </style>
    </head>
<script>
</script>
    <body>
        <div id="box">
        <div class="left"></div>
        <div class="right"></div>
        </div>
    </body>
</html>

文章分类

在线客服
热线电话

微信公众账号