WEB加载动画之彩条起伏动画

介绍


本期将带给大家一个简单的创意加载效果——彩条起伏加载。顾名思义,我们会通过scss来完成,将会制作做7个不同颜色的矩形,按不同的延迟不断的递减然后再反弹,循环往复。寓意是希望各位同学像这个加载动画一样,生活过的多姿多彩。


接下来,我们先来一睹为快吧:


VID_20211124_211507.gif


感觉如何,其实这个动画的实现方案有很多,今天就用障眼法去实现它,希望给你打开书写css的新思路。


正文


1.彩条绘制


<div id="app">
<div class="loading">
<span>l</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
</div>

结构非常的简单,我们将会在div#app让div.loading居中显示,然后在loading中平分各个距离,渲染不同的颜色。


@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");

#app{
width: 100%;
height: 100vh;
background-color: #fff;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.loading{
width: 350px;
height: 120px;
display: flex;
overflow: hidden;
span{
flex:1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: cursive;
font-weight: bold;
text-transform: uppercase;
font-family: "Baloo Bhaijaan", cursive;
color: white;
font-size: 48px;
position: relative;
box-sizing: border-box;
padding-top: 50px;
@for $i from 1 through 7 {
&:nth-child(#{$i}) {
background: linear-gradient(180deg, hsl($i * 20 , 60%, 50%) 0, hsl($i * 20 , 60%, 90%) 100%);
box-shadow: inset 0 15px 30px hsl($i * 20 , 60%, 50%);
text-shadow: 12px 12px 12px hsl($i * 20 , 60%, 30%);
border-left: 1px solid hsl($i * 20 , 60%, 80%);;
border-right: 1px solid hsl($i * 20 , 60%, 60%);;
}
}
}
}

为了,美观我们还引入了谷歌的一个字体,居中显示是在div#app用了弹性布局。


#app{
display: flex;
justify-content: center;
align-items: center;
}

这三句话目的就是完成元素在上下左右居中。


另外,我们用scss的一大好处就是体现了出来,遍历十分的方便,即**@for ifrom1through7∗∗这一句就是遍历了七遍,通过i from 1 through 7** 这一句就是遍历了七遍,通过ifrom1through7∗这一句就是遍历了七遍,通过i就可以拿到下标,还可以参与运算,我们的颜色值就是通过他配合hsl色盘(HSL即色相、饱和度、亮度)去完成的。当然,色盘有360度,我们只取一部分形成清新的渐变,如果整个色盘都平分的话这几个色值出入还是太大会感觉很脏。


微信截图_20211124221851.png


我们发现文字被设置了padding-top: 50px,原因就是一会要完成起伏的动画,上面的部分最先消失,我们为了保证这些字母能显示时间更长一些,就往下移了一些距离。


2.起伏动画


一开始我们说过这个要用障眼法去实现,所以我们这里不改变span的高度或者裁切他。


.loading{
span{
//...
&::after{
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 100%;
top: 0;
left: -1px;
right: -1px;
background: linear-gradient(180deg, white 0, rgb(249, 249, 249) 100%);
animation: shorten 2.1s infinite ease-out;
}
@for $i from 1 through 7 {
// ...
&::after{
animation-delay: #{ $i * 0.08s};
}
}
}
}
}
@keyframes shorten {
12% { height: 10px; }
}

微信截图_20211124222854.png


看了刚才的scss代码可以发现,我们其实是通过一个绝对定位的伪类去遮挡了他,做了一个障眼法让人感觉他高度改变了,其实不然。


至于动画,就更容易了就只有一句,就是在初期某个阶段让他变化高度到10px,也就是遮挡块变小了,显示的高度就就多了,然后缓缓增大至整块,来完成起伏效果。另外,我依然通过遍历在其伪类中,给他们不同的延迟显得更有层次感。


讲到这里,我们的这个案例就书写完成了


结语


本次通过一个做加载创意动画的案例,向各位同学讲到了css如何弹性居中,scss的遍历,hsl色盘改变色值的方便之处以及障眼法的一种方式,希望大家会喜欢,多多支持哦~


作者:jsmask
链接:https://juejin.cn/post/7034304330878418980

0 个评论

要回复文章请先登录注册