46-10000 复制前端代码 动的太极图

 

 

 效果：

  

 

 

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极动画</title>
    <style>
        body {
    background-color: rgba(24, 24, 24, 0.6);
}

#big-box {
    width: 400px;
    height: 400px;
    position: relative;
    transform: rotate(45deg);
    animation: ams infinite linear 12s;
    margin: 25% auto;
}

.content {
    width: 400px;
    height: 200px;
    position: relative;
    border: 1px #d2d2d2 solid;
    border-bottom: none;
}

.in-circle {
    width: 200px;
    height: 200px;
    border-radius: 200px;
    position: absolute;
    z-index: 1;
}

.small-circle {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
}

.black {
    border-radius: 200px 200px 0 0;
    background: white;
}

.rect-left {
    bottom: -100px;
    left: 0;
    background: black;
}

.left {
    background: white;
}

.white {
    border-radius: 0 0 200px 200px;
    background: black;
}

.rect-right {
    bottom: 100px;
    right: 0;
    background: white;
}

.right {
    background: black;
}

@keyframes ams {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
    </style>
    <!-- <link rel="stylesheet" href="./太极.css"> -->
</head>

<body>
    <div id="big-box">
        <div class="content black">
            <div class="in-circle rect-left">
                <div class="small-circle left"></div>
            </div>
        </div>
        <div class="content white">
            <div class="in-circle rect-right">
                <div class="small-circle right"></div>
            </div>
        </div>
    </div>
</body>

</html>

 

posted @ 2021-11-26 15:38  优敏行  阅读(84)  评论(0)    收藏  举报