纯CSS 快闪文字效果

“https://juejin.cn/post/7023643374569816095/”)

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

大家平时再刷视频的时候，肯定刷到过下面这种效果。

这种效果叫做快闪文字，最早是出现在2016年苹果7的发布会上。目前快闪文字多应用于视频/PPT中，这效果节奏感强，能抓住观看者，所以今天简单的来试一下，用CSS实现这个有趣的效果。

背景

快闪的文字的背景和文字多为相反的另种颜色，例如黑色配白色。我使用的就是黑色的背景。

设置滋

  .background {
      position: relative;
      font-size: 300px;
      background-color: #000;
      color: #fff;
      min-height: 100vh;
  }

一个文本

<div class="text">不要眨眼</div>

.text {
    font-size: 100px;
}

文字如何消失

消失在这里有很多方法，比如设置display:none ，或者把颜色设置为与背景一致的黑色。但既然想到了display:none, opacity也应该想得到，设置文字的透明度从1到1，这样也可以产生渐变的效果。

from {
 	 opacity: 1;
  }

to {
	opacity: 0;
}

animation: text 3s infinite ease-in-out;

多个文字

<div class="text">不要眨眼</div>
<div class="text">接下我</div>
<div class="text">半夏❤</div>
<div class="text">演示一个</div>
<div class="text">CSS</div>
<div class="text">快闪文字效果</div>

.text{
animation: text 1s ease-in-out;
opacity: 0;
}

文字全是折叠的，此时设置opacity: 0;，所有文字透明度为0，此时文字消失。

首先“不要眨眼”先出现接着消失，然后’‘接下我’'出现并消失。以此类指导"快闪文字效果"消失。那我们的动画其实还是

from {
	opacity: 1;
}

to {
	opacity: 0;
} 

为了让文字是逐渐出现和消失的，所以我们只需要给文字的动画加上等差的延迟即可。

.text:nth-child(2) {
animation-delay: 2s;
}
.text:nth-child(3) {
animation-delay: 3s;
}
.text:nth-child(4) {
animation-delay: 4s;
}
.text:nth-child(5) {
animation-delay: 5s;
}
.text:nth-child(6) {
animation-delay: 6s;
} 

后记

不过这种实现的方法是有问题的，当你想循环这段快闪文字的话，文字会出现重叠的现象，此时有人会想，那是不是CSS无法实现了，其实不是，css中的animation-delay可以设置为负值，可以完美的解决这个问题。不过：欲知后事如何，且听下回分解！