web实现太极图背景色线性渐变旋转动画htmlcssafterbeforelineargradienttransformrotateanimation

Posted 2023-03-12 牧碼人

文章目录

• 前言
• 公共的css动画
• 写法一
• 写法二
• 微信小程序演示

---

前言

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

---

公共的css动画

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

    to 
        transform: rotate(450deg);
    

---

写法一

<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中详细查看。

---

微信小程序演示