小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
介绍
本期将会使用scss写一个3d波环的动画,可以当做web场景中的加载动画使用,通过这个案例也可以了解到scss的遍历语法以及怎么做动画延迟。
接下来,我们先看一下效果吧~
怎么样,有没有被催眠到?这个其实非常简单易学,我们马上就要开始咯~
正文
1.html结构
<div class="main">
<ul class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
复制代码
这里事先说明下,.main作为将作为主容器,全屏填充设置主背景。.circle将作为圆环父容器里面将设置preserve-3d,其下的li标签将做波动动画。
2.main样式
.main {
width: 100%;
min-height: 100vh;
padding: 0px 0 0px;
text-align: center;
background-color: #0c0c0c;
overflow: hidden;
font-size: 14px;
background-image: radial-gradient( circle farthest-corner at -4% -12.9%, rgb(51, 66, 73) 0.3%, rgba(30,33,48,1) 90.2% );
display: flex;
justify-content: center;
align-items: center;
}
复制代码
我们这里用background-image写一个渐变深色的背景,然后用设置为弹性盒子再让里面元素居中显示。
3.circle样式
$r:12px;
.circle{
width: 320px;
height: 320px;
position: relative;
perspective: 800px;
transform-style: preserve-3d;
transform: rotateX(60deg);
li {
position: absolute;
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 2px 0 #c9c5c5,inset 0 2px 0 #c9c5c5;
top: 0;
left: 0;
@for $i from 1 through 12 {
&:nth-child(#{$i}) {
left:calc(#{$i*$r});
top:calc(#{$i*$r});
right:calc(#{$i*$r});
bottom:calc(#{$i*$r});
animation: move 3.2s cubic-bezier(.5,-.25,.2,1) infinite both;
animation-delay: calc(#{$i*0.1}s);
}
}
}
}
复制代码
我们将在circle设置圆环的大小,并设置成3d模式,再给他个800px深度。下面li标签有12个先设置成绝对定位以及把它变成圆环,我们就用scss去做遍历,计算left,top,right,bottom的大小,也就是定义一个常量 i去做乘法,使其产生不同距离,因为父级是正方形,li又是绝对定位,所以不同距离就会出现不同大小的圆圈出来,整个一看就变成了波环了。
同时,我们在li还要设置好动画,和不同的动画延迟,因为我们接下来就要让他动起来了~
4.波动动画
@keyframes move{
0%{
transform: translateZ(-120px) scale(1) skew(0deg);
opacity: .25;
}
50%{
transform: translateZ(120px) scale(-1);
opacity: .75;
}
100%{
transform: translateZ(-120px) scale(1) skew(0deg);
opacity: .25;
}
}
复制代码
这个动画就是从上到下,从大到小,从浅到深去做过度,很简单的直接看代码了,不做过多赘述。
很简单的,因为有不同的延时所以各个li标签组成的动画整体就会变得连贯。
这样,我们的动画就出来了,在线演示。
结语
发现没有,用scss的遍历可以做出非常惊艳的元素动画或者是大批量的属性变换。这个案例我们只用了仅仅数十行就完成了,还是非常简单的,没有学习scss前端新人一定要马上入坑啊太有趣了,我们还可以以此为例,一起发挥想想,相信你会做出一个属于自己的scss动画来的~