纯CSS 快闪文字效果

举报
搞前端的半夏 发表于 2021/12/12 21:55:24 2021/12/12
【摘要】 “https://juejin.cn/post/7023643374569816095/”)大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,邀你进群,一起学习交流前端,成为更优秀的工程师~关注公众号:半夏话前端,了解更多前端知识!点我探索新世界! 前言大家平时再刷视频的时候,肯定刷到过下面这种效果。这种效果...

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

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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可以设置为负值,可以完美的解决这个问题。不过:欲知后事如何,且听下回分解!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。