持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

前言

最近，在疯狂刷英叔的电影，在电影中，出现较多的元素就是太极了。今就用css实现一个太极，给电脑去去邪！

先来看看页面结构。

<div class="box">
    <div class="left bgc"></div>
    <div class="right bgc"></div>
    <div class="top circle">
        <div class="white little-circle"></div>
    </div>
    <div class="bottom circle">
        <div class="black little-circle"></div>
    </div>
</div>

为什么这样设计？来点样式看看效果，就明白为什么这样设计了。

/* 首先，是一个大圆，控制太极图的大小.为什么设置相对定位？因为后续的一些布局需要依赖大圆来进行定位 */
.box {
    margin: 300px;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
}
/* 太极图上下两个相切的小圆 */
.circle {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 25%;
    border-radius: 50%;
}

.top {
    background-color: #000;
    top: 0;
}

.bottom {
    background-color: #fff;
    bottom: 0;
}

/* 小圆内部还需要一个圆圈。 */
.little-circle {
    position: absolute;
    width: 25%;
    height: 25%;
    left: 37.5%;
    border-radius: 50%;
    top: 37.5%;
}

.black {
    background-color: #000;
}

.white {
    background-color: #fff;
}

先来看看当前效果。为了方便观察，暂时将背景色改为#abc。从图上看，大体的轮廓已经出来了，我们还需左侧的黑色半圆，右侧的白色半圆就可以完成我们的太极图。

而实现这两个半圆最简单的就是用两个div绘制，然后定位上去。这就是，设计html的思路。

写点样式完成这个太极。不清楚border-radius这种用法的，请移步这块。

.bgc {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
}

.left {
    left: 0;
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    background-color: #000;
}

.right {
    right: 0;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: #fff;
}

现在再来看看效果。

总感觉还差点什么，啊，他不会动，再加点动画让他动起来。

.box {
    ...
    animation: rotate 3s linear infinite;
}

/* 旋转360度，3s一次，无限循环 */

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

    100% {
        transform: rotate(360deg);
    }
}

现在效果就是这样。可以把最后的度数调大点，例如36000度，甚是有写轮眼的即视感。hhh～

使用css实现一个太极

前言