使用css做一个旋转的八卦图

使用css做一个旋转的八卦图

1, html部分

html 复制代码
<div class="tai">
 	<div class="bai"></div>
    <div class="hei"></div>
</div>

2, css部分

css 复制代码
.tai{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background: linear-gradient(#fff 50%, #000 50%); // 使用渐变添加背景颜色
        border-radius: 50%;
        display: flex;
        align-items: center;

        .bai{
            height: 50%;
            width: 50%;
            background: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        // 白色部分黑色小圆点
        .bai::after{
            content: '';
            width: 30px;
            height: 30px;
            background: #000;
            border-radius: 50%;
        }

        .hei{
            height: 50%;
            width: 50%;
            background: #000;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        黑色部分白色小圆点
        .hei::after{
            content: '';
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 50%;
        }

        // 加个动画旋转起来
        animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
相关推荐
IT_陈寒5 分钟前
Java并发编程避坑指南:7个常见陷阱与性能提升30%的解决方案
前端·人工智能·后端
HBR666_20 分钟前
AI编辑器(FIM补全,AI扩写)简介
前端·ai·编辑器·fim·tiptap
excel24 分钟前
一文读懂 Vue 组件间通信机制(含 Vue2 / Vue3 区别)
前端·javascript·vue.js
JarvanMo28 分钟前
Flutter 应用生命周期:使用 AppLifecycleListener 阻止应用崩溃
前端
我的xiaodoujiao1 小时前
从 0 到 1 搭建 Python 语言 Web UI自动化测试学习系列 9--基础知识 5--常用函数 3
前端·python·测试工具·ui
李鸿耀3 小时前
Flex 布局下文字省略不生效?原因其实很简单
前端
皮蛋瘦肉粥_1214 小时前
pink老师html5+css3day06
前端·css3·html5
华仔啊9 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel9 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴9 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa