使用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);
        }
    }
相关推荐
雷达学弱狗1 小时前
链式法则解释上游梯度应用
开发语言·前端·javascript
爱隐身的官人3 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML3 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
烛阴6 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者6 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
vivi_and_qiao7 小时前
HTML的form表单
java·前端·html
骑驴看星星a7 小时前
Vue中的scoped属性
前端·javascript·vue.js
四月_h7 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_427506087 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
雨枪幻。9 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript