用HTML + CSS实现太极图

借来一夜星光

已于 2025-01-08 16:29:06 修改

阅读量552

点赞数 12

分类专栏：前端动效文章标签： css 前端 html5 html

于 2025-01-08 10:08:37 首次发布

本文链接：https://blog.csdn.net/qq_58195504/article/details/144990741

版权

前端动效专栏收录该内容

7 篇文章

订阅专栏

一、效果图

如图所示，太极图一半为黑色（代表阴），另一半为白色（代表阳）。这两部分相互环绕，形成一种流动的、旋转的感觉。

二、实现思路

1. 首先绘制出一个圆形，使用 线性渐变 linear-gradient来创建黑白两色的分界线。

2. 设置两个子元素用来替代太极图中的两个鱼眼。并放在合适的位置，为方便观看这里加上了边框。

3. 给鱼眼设置 径向渐变 -webkit-radial-gradient来实现从中心开始的颜色过渡。

4. 定义动画的关键帧，实现太极图从0度到360度的自动旋转，并去掉鱼眼边框。

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="one"></div>
            <div class="two"></div>
        </div>
    </div>
</body>

<style>
    *{margin: 0;padding: 0;}
    .container{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: gray;
    }
    .box{
        width: 500px;
        height: 500px;
        background-color: #000;
        border: 1px solid #fff;
        border-radius: 50%;
        background: linear-gradient(to right,black 50%,white 50%);
        position: relative;
        animation: rota 2s linear infinite;
    }
    .box:hover{
        animation-play-state: paused;
    }
    .one{
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: -webkit-radial-gradient(center,white 20%,black 20%);
        position: absolute;
        top: 0;
        left: 125px;
    }
    .two{
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: -webkit-radial-gradient(center,black 20%,white 20%);
        position: absolute;
        bottom: 0;
        left: 125px;
    }

    @keyframes rota {
        0%{
            transform: rotate(0);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style>
</html>