好玩的前端特效之会动的太极图

话不多说直接上干货
html文件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极动画</title>
    <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>

css文件代码

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);
    }
}

当然,放在一个文件当中也是可以的

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_46511491/article/details/106338314
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-27 21:57:36
阅读 ( 545 )
分类：前端

好玩的前端特效之会动的太极图

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看