文字到底能玩出多少花样(四)实现跃动的文字

·  阅读 1089
文字到底能玩出多少花样(四)实现跃动的文字

「这是我参与11月更文挑战的第15天,活动详情查看:2021最后一次更文挑战

前言

该文作为《文字效果到底能玩出多少花样》的第四篇文章,带大家学习 跃动的文字

总是看静静的文字难免有几分乏味,今天就带大家实现一个跃动的文字,跃动的文字还是有很多应用场景的,例如下面跳跃的 loading 效果,便可以用作 加载ing 效果。

loading.gif

基础知识

今天给大家带来的知识是 css3animation 属性

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 为交替循环

当当当当~~~,包就成功的跳起来了。

bao.gif

需求更进一步

单个文字跳跃多没意思啊,作为特色社会主义的好公民,团结就是力量,咱们要一起跳起来啊。

实现多个文字的跳跃,主要有几个难点:

  1. 多个文字跳跃
  2. 文字交替跳跃

多个文字跳跃

上面使用一个 span 实现字跳跃时,因此使用多个 span 标签包裹多个字,就可以实现多个字同时跳跃。

<div class="loading">
    <span></span>
    <span></span>
</div>
复制代码

你看,这不小包就永无休止的跳下去了。

xiaobao.gif

这不过瘾啊,万一我提前不知道字数怎么办?没法预先定义对应个数的 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 里面的内容为战场小包,战场小包就开始原地跳跃了。

zcxiaobao.gif

实现逐个跳跃效果

上面实现每个文字的拆分跳跃,但好像并不明显,感觉像把所有的文字放在一个 span 里面,之后一个 span 在跳跃;而且多个文字同步跳跃咋看咋憨(应该不是名字憨吧)。

为了让阿包不再憨,我要帅气的跳跃,咱们让每个字挨着跳跃试试,战字跳完,场字跳,之后小字和包字跳,周而复始,永不停息。

乍听上去,好像有点难以实现,但文章的最开始,animation 提供 animation-delay 属性可以设置动画的延迟时间,因此根据文字的顺序可以设置不同的 animation-delay

span.style.animationDelay = `${i / 10}s`
复制代码

看起来好多了,活跃的阿包还是帅啊。

zcxiaobao2.gif

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 战场小包跳跃成了,炫酷啊。

zcxiaobao3.gif

源码仓库

传送门: 跃动的文字

往期精彩文章

复制代码

后语

伙伴们,如果大家感觉本文对你有一些帮助,给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题,或者对文章其中一部分不理解,都可以评论区回复我,我们来一起讨论,共同学习,一起进步!

如果感觉评论区说不明白,也可以添加我的微信(li444186976)或者 qq(3315161861) 详细交流,名字都是战场小包。

分类:
前端
收藏成功!
已添加到「」, 点击更改