太极图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>

　　

效果如下：

 

posted @ 2020-12-01 19:27  林恒  阅读(640)  评论(0)  编辑  收藏  举报