使用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);
        }
    }
相关推荐
小奋斗7 分钟前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军8 分钟前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_4050233711 分钟前
webpack 学习
前端·学习·webpack
云中雾丽11 分钟前
flutter中 Future 详细介绍
前端
求知呀11 分钟前
服务器状态管理 Vue Query
前端
在下Z.25 分钟前
前端基础--css(1)
前端·css
常在士心29 分钟前
Flutter项目支持鸿蒙环境
前端
重生之我要当java大帝29 分钟前
java微服务-尚医通-管理平台前端搭建-医院设置管理-4
java·开发语言·前端
用户595619575452330 分钟前
Vue-i18n踩坑记录
前端
WindrunnerMax32 分钟前
从零实现富文本编辑器#8-浏览器输入模式的非受控DOM行为
前端·前端框架·github