这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战
介绍
不知道各位同学小时候玩的第一个玩的游戏是什么,我反正玩的是马里奥,那真是一个无忧无虑的时光,所以,本期将会仅使用scss来完成一个像素文字加载动画。
废话不多说,我们先看一下效果吧~
正文
1.展示文字
<div id="app">
<p class="loading">
<span>l</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</p>
</div>
复制代码
@use "sass:math";
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
#app{
width: 100%;
height: 100vh;
position: relative;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
.loading{
font-family: 'Press Start 2P', sans-serif;
font-size: #{100vw * 0.025};
color: #ffffff;
padding: 1.2em;
position: relative;
}
复制代码
我们这里先引入一个像素字体,然后让loading文字居中显示在屏幕中央。
是不是瞬间有内味了,但是我们想让文字都变成大写字母又不想写js怎么办,对,我们用css也可以完成。
.loading{
// ...
text-transform: uppercase;
}
复制代码
用text-transform设置成uppercase就可以让文字都变成大写字母了。
.loading{
&::after{
content: '';
display: block;
height: 2px;
bottom: 0;
left: 0;
right: 0%;
background-color: #ffffff;
position: absolute;
}
}
复制代码
然后我们用伪类在文字下面画一条白色细线,这里我们用了绝对定位到底部,让其left与right都为0,就可以达成要求。那为什么不是用width:100%那是因为我们对后面的动画是有要求的,从左至右显示,而且要再次从左至右消失,width不能完全满足这个,所以我们用left与right代替,当然也可以使用mask和background去实现这个条白线。
2.白线动画
$t: 3s;
.loading{
&::after{
animation: line $t ease-in-out infinite;
}
}
@keyframes line {
0%{ right: 100%; left: 0%; opacity: .1; }
50% { right: 0%; left: 0%; opacity: 1; }
100% { left:100%; right:0%; opacity: .1; }
}
复制代码
我们先用定义一个动画时间$t默认是3秒。再把这条白线从左至右变长,然后又从左至右变短,当然这个过程也要伴随着opacity透明度。原理就是用left与right做基准点,从而改变另一个值从而达到在某个基准点变长和缩短的效果。
3.字体动画
@use "sass:math";
$n: 7;
.loading{
span{
display: inline-block;
animation-name: char;
animation-duration: $t;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
@for $i from 1 through $n {
&:nth-child(#{$i}) {
animation-delay: #{ math.div($i * $t * 0.25 , $n) };
}
}
}
}
@keyframes char {
0% { transform: translateY(1.8em); opacity: 0; }
25%, 50% { transform: none; opacity: 1; }
75%, 100% { transform: translateY(-1.8em); opacity: 0;}
}
复制代码
这里先定义一下当前数量$n,因为loading被分割成7个单词。我们就用到scss遍历,可以看到他们除了animation-delay动画延迟其他的动画属性都是一样的,而且记住animation-fill-mode一定要设置为backwards,不然第一次动画会不连贯。还要注意的是新版本的scss要引入 sass:math,用它去做除法运算,单纯用“/”符号就会在编译过程中报错。
接下来说说这个动画做了什么,其实就是让他从下往上移动,在中间停留一下,然后继续往上走,因为我们对每个单词都设置了不同的延迟,就会发送奇妙的顺次显示的动画效果。
好了结束啦,还是很简单的吧,不知道你学废了么,在线演示。
结语
本次我们用了scss的很多方法来完成了这个案例,可以当做一次scss的练习吧,你可以学到为什么引入sass:math,怎么去遍历,怎么去做顺次动画效果等等。还等什么,一起都来尝试一下吧~