前言
该文作为《文字效果到底能玩出多少花样》的第四篇文章，带大家学习 跃动的文字 。
总是看静静的文字难免有几分乏味，今天就带大家实现一个跃动的文字，跃动的文字还是有很多应用场景的，例如下面跳跃的 loading 效果，便可以用作 加载ing 效果。
基础知识
今天给大家带来的知识是 css3 的 animation 属性
animation 可以定义一组或多组动画。它有以下几个属性:
- animation-timing-function: 设定动画的速度曲线
- animation-direction: 定义是否应该轮流反向播放动画
- animation-name: 动画名称，与
keyframe绑定 - animation-duration: 完成动画所需要的时间
- animation-delay: 规定动画开始的延迟效果
- animation-iteration-count: 规定动画播放的次数
实现单个文字的跳跃
animation 可以实现动画效果，给单个文字标签配置 keyframe 100% 为向下 transformY(-20px) ，就能轻松实现。
.loading span { transform: translateY(20px); animation: bounce 0.3s ease infinite alternate; } @keyframes bounce { to { transform: translateY(-20px); } } 复制代码
infinite为无限循环，alternate为交替循环
当当当当~~~，包就成功的跳起来了。
需求更进一步
单个文字跳跃多没意思啊，作为特色社会主义的好公民，团结就是力量，咱们要一起跳起来啊。
实现多个文字的跳跃，主要有几个难点：
- 多个文字跳跃
- 文字交替跳跃
多个文字跳跃
上面使用一个 span 实现包字跳跃时，因此使用多个 span 标签包裹多个字，就可以实现多个字同时跳跃。
<div class="loading"> <span>小</span> <span>包</span> </div> 复制代码
你看，这不小包就永无休止的跳下去了。
这不过瘾啊，万一我提前不知道字数怎么办？没法预先定义对应个数的 span 。别忘了，还有 JavaScript 那，先通过 textContent 属性获取到文字，之后通过 split 将文字拆分，根据每个文字创建 span 标签。
let loading = document.querySelector(".loading"); let letters = loading.textContent.split(""); loading.textContent = ""; letters.forEach((letter, i) => { let span = document.createElement("span"); span.textContent = letter; loading.append(span); }); 复制代码
现在我修改 .loading 里面的内容为战场小包，战场小包就开始原地跳跃了。
实现逐个跳跃效果
上面实现每个文字的拆分跳跃，但好像并不明显，感觉像把所有的文字放在一个 span 里面，之后一个 span 在跳跃；而且多个文字同步跳跃咋看咋憨(应该不是名字憨吧)。
为了让阿包不再憨，我要帅气的跳跃，咱们让每个字挨着跳跃试试，战字跳完，场字跳，之后小字和包字跳，周而复始，永不停息。
乍听上去，好像有点难以实现，但文章的最开始，animation 提供 animation-delay 属性可以设置动画的延迟时间，因此根据文字的顺序可以设置不同的 animation-delay。
span.style.animationDelay = `${i / 10}s` 复制代码
看起来好多了，活跃的阿包还是帅啊。
3D文字跳跃
单调的跳跃还是有些乏味，来加点 3D 效果让文字丰满起来，使用 text-shadow 属性实现 3D 效果。
text-shadow 叠加多个阴影，实现比较炫酷的 3D 效果，之后 animation 100% 稍微修改阴影效果。
text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4); /* animation */ text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2); 复制代码
3D 战场小包跳跃成了，炫酷啊。
源码仓库
传送门: 跃动的文字
