手把手教你一个超容易实现的字符跳动特效

前言

这段时间比较闲，最近慢慢地又研究上了 CSS 特效，今天给大家带来一个超容易实现的特效 —— 字符跳动。之所以说它简单，是因为它的代码简短，通俗易懂，希望大家都能学会。

效果预览

字符跳动效果如下所示。这是用 HTML 和 CSS 实现的一个动态效果。它创建了一个带有跳动效果的文字，文字内容是“欢迎进入前端的世界”。

基本HTML结构

首先我们来搭建基本的 HTML 结构，因为是字符跳动，所以我们需要多设计几个放置字符的 div 或者 span，这里我们使用 span 元素，相关代码如下所示。

<div class="wavy">
        <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>
        <span style="--i:9">界</span>
</div>

这里 div 标签用于创建一个容器，类名为“wavy”。span 标签用于创建一个内联元素，用于包裹每一个文字。 style="--i:1" 是 CSS 的自定义属性，可以控制每一个文字的动画效果。

到这里我们就完成了第一步。

设计CSS样式

容器搭建好了，现在开始给容器里的元素添加样式了。首先来给 wavy 类名添加样式，代码如下所示。

.wavy{
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));
}

这里运用到了-webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2))，这是一个特有的属性，用于创建一个元素的倒影效果。below：表示倒影将位于元素下方；-12px：表示倒影相对于元素的位置向下偏移 12 像素；linear-gradient(transparent,rgba(0,0,0,0.2))：表示倒影的渐变效果，从透明到半透明黑色。

我们从效果中看到的倒影就是这段 CSS 实现的。

接下来是 span 元素，应用到 wavy 类的 span 元素上。

.wavy span{
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 2em;
    animation: animate 1s ease-in-out infinite;
    animation-delay: calc(.1s * var(--i));
}

在这里设计了一个动画效果 animation: animate 1s ease-in-out infinite。这是定义一个名为 animate 的动画，持续时间为 1 秒，使用 ease-in-out 缓动函数，并且无限循环播放。该动画的实现后面会介绍。

在搭建容器的时候应用到了 --i，到这里就开始发挥作用了。 animation-delay: calc(.1s * var(--i))，根据变量 --i 的值来设置动画延迟时间，每个元素的延迟时间都不同。

至此，通过以上几段代码，就可以达到元素跳动，每个元素的动画延迟时间都不同，创建了一个错落有致的效果。

但是仅仅有那些还不够，动画才是最重要的，动画相关代码如下所示。

@keyframes animate{
    0%{
        transform: translateY(0px);
    }
    20%{
        transform: translateY(-24px);
    }
    40%,100%{
        transform: translateY(0px);
    }
}

代码中使用了 transform 属性来实现动画效果。transform 属性用于改变元素的形状、位置和尺寸。

在 0% 时刻，元素的垂直位置不变，即 translateY(0px)。

在 20% 时刻，元素在垂直方向上向上移动 24 像素，即 translateY(-24px)。

在 40% 和 100% 时刻，元素的垂直位置回到初始位置，即 translateY(0px)。

这样，动画会以一个周期性的方式在元素的垂直方向上来回移动。

总结

以上就是该效果的实现过程了，整体而言并不是很难。建议可以多看几遍，然后在此基础上可以再扩展，实现不同的效果。另外在实现该效果的过程中有任何问题，欢迎大家在评论区里指出。