欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

转动的太极纯HTML代码

程序员文章站 2024-03-19 09:08:04
...

Web基础篇

HTML-03转动的太极图

转动的太极纯HTML代码

    <style>
        .box{
            width:400px;
            height:400px;
            background-color:gray;
            margin:100px auto 0 auto;
            border-radius:50%;
            position:relative;
            animation:rotate 3s linear infinite;
        }
        @keyframes rotate{
            0%{
                transform:rotate(0deg);
            }100%{
                transform:rotate(360deg);
            }
        }
        .square{
            width:200px;
            height:400px;
            position:absolute;
            top:0;
        }
        .squareWhite{
            background-color:white;
            left:0;
            border-radius:200px 0 0 200px;
        }
        .squareBlack{
            background-color:black;
            right:0;
            border-radius:0 200px 200px 0;
        }
        .circle{
            width:200px;
            height:200px;
            border-radius:50%;
            position:absolute;
            left:100px;
        }
        .circleWhite{
            background-color:white;
            top:0;
        }
        .circleBlack{
            background-color:black;
            bottom:0;
        }
        .dot{
            width:30px;
            height:30px;
            background-color:black;
            border-radius:50%;
            position:absolute;
            top:85px;
            left:85px;
        }
        .dotWhite{
            background-color:white;  /*后定义的样式会把先定义的覆盖*/
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 一个标签可以定义多个类名 -->
        <div class="square squareWhite"></div>
        <div class="square squareBlack"></div>
        <div class="circle circleWhite">
            <div class="dot"></div>
        </div>
        <div class="circle circleBlack">
            <div class="dot dotWhite"></div>
        </div>
    </div>
</body>
</html>
相关标签： 太极图 纯代码会动的太极 html

上一篇： [洛谷P3952] 时间复杂度

下一篇： 记一次惨痛的安装软件经历

推荐阅读