CSS3太极图动图

最新推荐文章于 2024-05-11 20:33:26 发布

吕杰刚

最新推荐文章于 2024-05-11 20:33:26 发布

阅读量700

点赞数 1

文章标签： css3 animation html css html5

本文链接：https://blog.csdn.net/weixin_46389377/article/details/108013276

版权

今天看到太极图很有意思，就用css写了一个想跟大家分享一下。
步骤一：先用一个div盒子分成两份，一半是黑一半是白。先把背景颜色设置成黑色（白色），然后左边/右边盒子可以用border-left/right: 150px solid #000/#fff。
在这里插入图片描述
步骤二：加css样式让这个盒子变成一个圆，如下图。
步骤三：这里我用了伪元素加了相当于两个小盒子，能少写很多代码也方便理解。（但一定要注意伪类元素即使不写内容也要加上content=‘’，这个我觉得容易忘记就提醒一下大家，我的盒子就一直没出来还以为哪里写错了，/(ㄒoㄒ)/）
步骤四：把这两个伪类加 border-radius: 50%;让其变成圆，然后用定位放在合适的位置就可以了。
最后一步加上颜色，大家都知道怎么加吧。
下面是效果图(去水印太麻烦了/(ㄒoㄒ)/)
这里我用@keyframes做了一个旋转一圈的动画。
在这里插入图片描述
废话不多说，上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #ccc;
        }

        .box {
            position: relative;
            width: 150px;
            height: 300px;
            border-left: 150px solid #000000;
            margin: 200px auto;
            background-color: #fff;
            border-radius: 50%;
            animation: move linear 5s infinite;
            transition: all 5s;
        }

        .box::before {
            position: absolute;
            content: '';
            top: 150px;
            left: -67px;
            width: 30px;
            height: 30px;
            border: 60px solid #000;
            border-radius: 50%;
            background-color: #fff;
        }

        .box::after {
            position: absolute;
            content: '';
            top: 0;
            left: -73px;
            width: 30px;
            height: 30px;
            border: 60px solid #fff;
            border-radius: 50%;
            background-color: #000;
        }

        @keyframes move {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

以上就是全部了，还请大佬们多多提点。。

吕杰刚

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3太极图动图

今天看到太极图很有意思，就用css写了一个想跟大家分享一下。步骤一：先用一个div盒子分成两份，一半是黑一半是白。先把背景颜色设置成黑色（白色），然后左边/右边盒子可以用border-left/right: 150px solid #000/#fff。步骤二：加css样式让这个盒子变成一个圆，如下图。步骤三：这里我用了伪元素加了相当于两个小盒子，能少写很多代码也方便理解。（但一定要注意伪类元素即使不写内容也要加上content=‘’，这个我觉得容易忘记就提醒一下大家，我的盒子就一直没出来还以为哪里写
复制链接

扫一扫