CSS动画之太极图案

571 阅读2分钟

这是我参与新手入门的第二篇文章

道生一,一生二,二生三,三生万物。对于喜欢道教学说或者玄幻小说的人来说,这句话应该是不陌生的。本着对太极图案的喜爱,所以写了此篇文章。

主要知识点

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

变量的声明(--)

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

--test:red;   //声明一个变量test,值为红色

var() 函数

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

color:var(--test);  

calc() 函数

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

width: calc(100% - 100px);  

效果实现

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

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

<body>
    <div></div>
</body>

准备css样式

  1. body样式,给body一个初始的样式
*{
    margin: 0;
    padding: 0;
}

body{
    position: relative;
    background: #4d5077;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
  1. div样式,定义宽高、两个颜色变量
div{
    width: 30rem;
    height: 30rem;
    --c1:#000;
    --c2:#fff;
    background: linear-gradient(var(--c1) 50%,var(--c2) 50%);
    position: relative;
    border-radius: 50%;
}
  1. 利用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%);
}

1625714707.jpg

  1. 给太极图案加上动画,并且鼠标放上去时,动画暂停
div{
    需要加上之前的样式
    animation:_rotate 5s linear infinite;
}

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

@keyframes _rotate{
  100%{
    transform:rotate(-360deg)
  }
}

点击查看效果

总结

CSS的函数和变量声明可以有效的去做自适应布局,但是需要考虑兼容性,如果你有兴趣,你也可以在此基础上进行演变,变成更丰富多彩的图案。