web实现太极图、背景色线性渐变、旋转动画、html、css、after、before、linear、gradient、transform、rotate、animation

---

前言

建议使用第一种写法，因为第二种写法存在像素失真问题，也就是没有第一种那么丝滑。第一种写法的优点是像素不失真，且更丝滑，但是代码比较多。第二种写法的优点是代码比较少，也比较难理解。

---

公共的css动画

@keyframes cartoon {
    from {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(450deg);
    }
}

☺☺☺☺☺☺☺

太极分为上阴下阳，而我们实现的时候是左右结构，所以需要旋转90度。旋转90度之后就需要用360度加上90度才能丝滑的做选做动画，避免了跳帧问题。

---

写法一

<div class="diagram_of_the_universe_linear_gradient_before_after">div>

---

.diagram_of_the_universe_linear_gradient_before_after {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    /* 圆球上半部分为白色，下半部分为黑色 */
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #ffffff 50%,
            #000000 50%,
            #000000 100%);
    position: relative;
    transform: rotate(-90deg);
    animation: cartoon linear infinite 8s;
}

.diagram_of_the_universe_linear_gradient_before_after::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 60px solid #000000;
    /* 左侧黑球套白点  */
    background-color: #FFFFFF;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.diagram_of_the_universe_linear_gradient_before_after::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 60px solid #FFFFFF;
    /* 右侧白球套黑点 */
    background-color: #000000;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

☺☺☺☺☺☺☺

第一步
设置div的宽高为360px，使用css的background: linear-gradient();设置div从上到下，从白到黑的渐变色。使用transform: rotate(-90deg);设置旋转角度为负的90度，因为伏羲八挂图是阴爻在上，阳爻在下；最后将div设置为相对定位。

第二步
使用伪类after和before设置太极的小圆部分。两个小圆都设置为绝对定位；圆的大小都为60px；它们的区别是背景色和边框色相反。这里会涉及到一些计算，两个圆的宽加起来正好等于div的宽，所以每个圆的宽就是180px；180px可以自由分配，这里小圆的宽给60px；边框宽也给60px；因为边框设置了四个边，所以宽度的和就是120px；总的加起来刚好180px。在PC端这种算法基本能达到理想效果，但是在微信小程序中会存在误差，需要具体情况具体调节设置。

---

写法二

<div class="diagram_of_the_universe_linear_gradient">div>

---

.diagram_of_the_universe_linear_gradient {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    /* 背景渐变色 */
    background:
        /* 180px 180px at 180px 75% 圆的大小 at x轴  y轴 */
        radial-gradient(180px 180px at 180px 25%, #000000 20%, #FFFFFF 20%, #FFFFFF 50%, transparent 50%),
        /* 180px 180px at 180px 75% 圆的大小 at x轴  y轴 */
        radial-gradient(180px 180px at 180px 75%, #FFFFFF 20%, #000000 20%, #000000 50%, transparent 50%),
        /* 线性渐变色 */
        linear-gradient(to right, #FFFFFF 50%, #000000 50%);
    animation: cartoon linear infinite 8s;
}

☺☺☺☺☺☺☺

主要使用background的渐变属性来处理问题，一共用到三次渐变，前两次编写小圆，最后一次是整体的渐变效果。想更深入了解渐变知识可到MDN中详细查看。

---

微信小程序演示