纯CSS 快闪文字效果

2,193 阅读2分钟

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

前言

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

快闪文字.gif 这种效果叫做快闪文字,最早是出现在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;

快闪文字1

多个文字

<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;
}

image-20211112233526436

文字全是折叠的,此时设置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;
} 

快闪文字2

后记

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