WEB加载动画之像素字动画(网页加载动画)
介绍
不知道各位同学小时候玩的第一个玩的游戏是什么，我反正玩的是马里奥，那真是一个无忧无虑的时光，所以，本期将会仅使用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，怎么去遍历，怎么去做顺次动画效果等等。还等什么，一起都来尝试一下吧~
作者：jsmask
链接：https://juejin.cn/post/7032460944165273607