主要知识点

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

变量的声明（--）

声明变量的时候，变量名前面要加两根连词线（--）。也就是当一个值（颜色、字体大小、宽、高等）被屡次使用的时候，咱们能够建立一个变量，若是须要修改样式，咱们只要改变这个变量就行了。函数

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

var() 函数

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

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

calc() 函数

calc() 函数执行用做属性值的计算,可以使用运算符：+ - * /。布局

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

效果实现

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

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

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

准备css样式动画

body样式，给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%;
}
复制代码

利用after和before，覆盖到div上，能够显示出太极图的两条鱼

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)
  }
}
复制代码

点击查看效果ui

总结

CSS的函数和变量声明能够有效的去作自适应布局，可是须要考虑兼容性，若是你有兴趣，你也能够在此基础上进行演变，变成更丰富多彩的图案。