<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    用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>
                    

                    文章分类

                    北京赛车玩法和赔率|官网_首页