这是我参与新手入门的第二篇文章
道生一,一生二,二生三,三生万物。对于喜欢道教学说或者玄幻小说的人来说,这句话应该是不陌生的。本着对太极图案的喜爱,所以写了此篇文章。
主要知识点
既然标题是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样式,给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)
}
}
总结
CSS的函数和变量声明可以有效的去做自适应布局,但是需要考虑兼容性,如果你有兴趣,你也可以在此基础上进行演变,变成更丰富多彩的图案。