WEB加载动画之像素字动画

这是我参与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文字居中显示在屏幕中央。

微信截图_20211119225227.png

是不是瞬间有内味了，但是我们想让文字都变成大写字母又不想写js怎么办，对，我们用css也可以完成。

.loading{
    // ...
    text-transform: uppercase;
}
复制代码

用text-transform设置成uppercase就可以让文字都变成大写字母了。

微信截图_20211119225718.png

.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去实现这个条白线。

微信截图_20211119230502.png

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，怎么去遍历，怎么去做顺次动画效果等等。还等什么，一起都来尝试一下吧~