使用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);
        }
    }
相关推荐
一枚前端小能手15 分钟前
Vue3 开发中的5个实用小技巧
前端
Sawtone16 分钟前
shadcn/ui:我到底是不是组件库啊😭图文 + 多个场景案例详解 shadcn + tailwind 颠覆性组件开发,小伙伴直呼高端
前端·面试
柏成16 分钟前
qiankun 微前端框架🐳
前端·javascript·vue.js
Sherry00720 分钟前
终极指南:彻底搞懂 React 的 useMemo 和 useCallback!(译)
前端·react.js
未来之窗软件服务20 分钟前
internationalization 全球系统风格分享,新加坡,墨西哥,泰国,印度,越南—仙盟创梦IDE
css·css3·收银系统开发·仙盟创梦ide·东方仙盟·全球化布局
穷小白24 分钟前
Vue3与Ue通信
前端·javascript
柏成28 分钟前
qiankun 源码解析🐳
前端·javascript·面试
前端一课31 分钟前
归元修道后篇
前端
奇舞精选33 分钟前
RAG优化策略
前端
临江仙45534 分钟前
Electron 自动更新全攻略:从 0 到 1 实现企业级 AppUpdater 组件(附完整代码)
前端·javascript