太极图HTML+CSS（可旋转）代码记录

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>太极旋转图</title>

        <style type="text/css">

            body{

                margin: 0px;

                padding: 0px;

            }

            .wrap{

                width: 200px;

                height: 100px;

                margin: 50px auto;

                /*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/

                border-width: 1px 1px 100px 1px;

                border-style: solid;

                border-radius: 50%;

                position: relative;

                /*通过属性去调用之前定义好的动画*/

                animation: rote 1s linear infinite;

                /*rote 就是这个动画的名称*/

                /*2s 表示做一次这个动画需要2s时间 决定旋转的快慢*/

                /*linear 表示匀速的旋转*/

                /*infinite 表示永久旋转*/

            }

            .wrap:before,

            .wrap:after{

                content: '';/*激活伪元素的必要因素*/

                position: absolute;

                top: 50%;

                width: 20px;

                height: 20px;

                border-radius: 50%;

            }

            .wrap:before{

                background-color: #fff;

                border: 40px solid #000;

            }

            .wrap:after{

                /*当设置绝对定位时，如果没有参考物（相对定位），

                 * 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*/

                /*相对定位其实就是相对参考物:父相子绝*/

                right: 0px;

                background-color: #000;

                border: 40px solid #fff;

                }

                /*定义CSS动画*/

                @keyframes rote{

                    from{

                        transform: rotate(0deg);/*旋转*/

                    }

                    to{

                        transform: rotate(360deg);/*旋转*/

                    }

                }

        </style>

    </head>

    <body>

        <div class="wrap"></div>

    </body>

</html>
效果如下：
巴特西

太极图HTML+CSS（可旋转）代码记录

最新文章

热门文章
