手把手教你简单实现一个模拟手机信号

前言

慢慢地我又写上了关于CSS的文章，这次给大伙带来的是一个模拟手机信号的效果，就是手机最右上角的那几格信号。

具体效果可参考下面码上掘金。

效果预览

结构设计

现在我们来进行该效果的实现。首先需要设计几个柱形信号条，代码如下所示。

  <div class="loader">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
        <span style="--i:4"></span>
        <span style="--i:5"></span>
        <span style="--i:6"></span>
        <span style="--i:7"></span>
        <span style="--i:8"></span>
  </div>

定义了一个名为.loader的div容器，其中包含了多个带有不同样式的span元素。每个span元素都具有一个内联样式，该样式使用--i自定义属性设置元素的索引值。这个就是我们需要的柱形信号条。

自定义--i值的目的来确定信号的出现顺序，整个手机信号动画会在.loader容器中展示出来。

样式设计

写好HTML代码，便可以往里面加入CSS样式了。样式分为两部分，分别是柱形信号以及能使手机信号闪烁的动画。我们先来看柱形信号的样式设计，相关代码如下。

.loader span{
    width: 20px;
    background: #111;
    margin: 0 10px;
    height: calc(20px * var(--i));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: translateY(-35px);
    animation: animate 2s linear infinite;
    animation-delay: calc(0.25s * var(--i));
}

将每个span元素的宽度设置为 20 像素，并将每个span元素的背景颜色设置为黑色，这里可能有人会好奇，从效果看这个span不是黑色呀？乍眼一看确实不是黑色，但是如果我们将动画暂定，会发现span最初的颜色，因此这个我们看到的span颜色是通过动画来变化的，后续讲动画部分的时候会介绍。

这里有一段关于--i的样式代码：height: calc(20px * var(--i))。根据span元素的索引值，使用calc来动态计算每个span元素的高度，每个span元素的高度都是 20 像素乘以索引值。

将名为animate的关键帧动画放到每个span元素上，持续时间为 2 秒，使用线性的时间曲线，并且无限循环播放。并根据span元素的索引值，为每个span元素设置不同的延迟时间，以创建逐个出现的效果。

接下来是自定义动画，也叫关键帧动画。

@keyframes animate {
    0%{
        background: #fff;
        filter: blur(2px);
        box-shadow: 0 0 10px #00b3ff,
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff,
        0 0 200px #00b3ff,
        0 0 300px #00b3ff,
        0 0 400px #00b3ff
    }
    25%,75%{
        background: #111;
        filter: blur(0px);
        box-shadow: none;
    }
    100%{
        background: #fff;
        filter: blur(2px);
        box-shadow: 0 0 10px #00b3ff,
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff,
        0 0 200px #00b3ff,
        0 0 300px #00b3ff,
        0 0 400px #00b3ff
    }
}

对于animate动画，在 0% 的关键帧中，元素的样式包括白色背景、2px 的模糊滤镜和一个呈现光晕效果的多个阴影。在 25% 和 75% 的关键帧中，元素的样式恢复到初始值，即黑色背景、无模糊效果和无阴影。在 100% 的关键帧中，元素的样式再次变为白色背景、2px 的模糊滤镜和光晕阴影，形成闪烁效果。子啊开始和结束帧里，加入了box-shadow属性来设置多重阴影。

总的来说，就是每个span元素根据其索引值依次显示出来，具有动态高度、闪烁的白色背景和光晕效果。整个动画周期为 2 秒，每个span元素的出现有不同的延迟时间。

总结

这就是手机信号动画的实现，整体实现起来并不难，代码也十分容易看懂并理解，大家可以多看几遍。在实现它的过程中，我突然想起了手机的WIFE信号，所以下次看看能不能实现一个WIFE信号吧。