CSS 动画解决方案
CSS3 允许在没有任何 Javascript 代码的情况下创建动画。
要获得闪烁的文本效果，我们还需要@keyframes 规则。
我们通过为闪烁的文本动画定义一些关键帧并将可见性设置为“隐藏”来使用 CSS 动画。
在我们下面的示例中，我们还将 -webkittextension 添加到 animation 属性以提高浏览器兼容性。
使用 CSS3 动画创建闪烁文本效果的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
</style>
</head>
<body>
这是<span class="blink">闪烁的</span>文本
</body>
</html>
让我们看另一个例子，我们在 <div> 框内的 <span> 元素中有一个闪烁的文本，并将一些样式应用到框上。
在本例中，我们将动画时间设置为 2 秒。
添加闪烁文字效果的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.blink {
width: 220px;
height: 50px;
background-color: #342ab8;
padding: 10px;
text-align: center;
line-height: 50px;
}
span {
font-size: 26px;
font-family: cursive;
color: #fff;
animation: blink 2s linear infinite;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="blink">
<span>闪烁文本</span>
</div>
</body>
</html>
也可以使用带有 CSS3 动画的闪烁背景。
其中我们也创建了一组关键帧，然后在起点和终点指定背景颜色。
创建闪烁背景的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
@keyframes blinking {
0% {
background-color: #06c3d1;
border: 3px solid #666;
}
100% {
background-color: #270da6;
border: 3px solid #666;
}
}
#blink {
width: 200px;
height: 200px;
animation: blinking 1s infinite;
}
</style>
</head>
<body>
<div id="blink"></div>
</body>
</html>
通常，闪烁效果用于使用户注意到我们上的某些文本。
如果我们需要这样的效果，请尝试使用 CSS 动画。
日期：2020-06-02 22:15:01 来源：oir作者：oir