主要知识点

既然标题是CSS动画之太极图案，那显而易见用到的技术是CSS，这篇文章主要讲的就是CSS的两个函数（var 和 calc）和一个变量声明（—）。

变量的声明（–）

声明变量的时候，变量名前面要加两根连词线（–）。也就是当一个值（颜色、字体大小、宽、高等）被多次使用的时候，我们可以创建一个变量，如果需要需改样式，我们只要改变这个变量就好了。

--test:red;   //声明一个变量test，值为红色
复制代码

var() 函数

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。此函数就是读取我们上面声明的变量的。

color:var(--test);  
复制代码

calc() 函数

calc() 函数执行用作属性值的计算,可使用运算符：+ – * /。

width: calc(100% - 100px);  
复制代码

效果实现

只使用一个div标签，实现一个太极图案效果。

准备html，其实就一个div标签

<body>
    <div></div>
</body>
复制代码

准备css样式

body样式

*{
    margin: 0;
    padding: 0;
}

body{
    position: relative;
    background: #4d5077;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

div样式，定义宽高、两个颜色变量

div{
    width: 30rem;
    height: 30rem;
    --c1:#000;
    --c2:#fff;
    background: linear-gradient(var(--c1) 50%,var(--c2) 50%);
    position: relative;
    border-radius: 50%;
}
复制代码

太极图的两条鱼

div::after,div::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    border-radius: 50%;
}

div::before{
    left: 0;
    background: radial-gradient(var(--c2) 25%,var(--c1) 25%);
}

div::after{
    right:0;
    background: radial-gradient(var(--c1) 25%,var(--c2) 25%);
}
复制代码

给太极图案加上动画，并且鼠标放上去时，动画暂停

div{
    需要加上之前的样式
    animation:_rotate 5s linear infinite;
}

div:hover{
  animation-play-state: paused;
  cursor:pointer;
}

@keyframes _rotate{
  100%{
    transform:rotate(-360deg)
  }
}
复制代码