css3 实现文字闪烁效果的三种方式示例代码
程序员文章站
2022-03-10 20:53:02
1.通过改变透明度来实现文字的渐变闪烁，效果图：文字闪烁&...</div>
<div class="content">
<h3>1.通过改变透明度来实现文字的渐变闪烁，效果图：</h3>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="css3 实现文字闪烁效果的三种方式示例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMTA0MjUvYl8wXzIwMjEwNDI1MTkyNjIzMzM2Mi5naWY=" title="css3 实现文字闪烁效果的三种方式示例代码"></p>
<div class="jb51code">
<pre class="brush: css;">
<!doctype html>
<html>
<head>
</head>
<title>文字闪烁</title>
<body>
<div class="blink">
星星之火可以燎原
</div>
</body>
<style>
.myclass{
letter-spacing:5px;/*字间距*/
color: red;
font-weight:bold;
font-size:46px;
}
/* 定义keyframe动画，命名为blink */
@keyframes blink{
0%{opacity: 1;}
100%{opacity: 0;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* 定义blink类*/
.blink{
color: red;
font-size:46px;
animation: blink 1s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
<style>
</html>
</pre>
</div>
<p style="text-align: left">如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：</p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="css3 实现文字闪烁效果的三种方式示例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMTA0MjUvYl8wXzIwMjEwNDI1MTkyNjIzNDY0Ny5naWY=" title="css3 实现文字闪烁效果的三种方式示例代码"></p>
<div class="jb51code">
<pre class="brush: css;">
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}</pre>
</div>
<h3>2.利用背景图片或者背景渐变，实现文字颜色的闪烁效果，效果图：</h3>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="css3 实现文字闪烁效果的三种方式示例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMTA0MjUvYl8wXzIwMjEwNDI1MTkyNjIzOTk0Ni5naWY=" title="css3 实现文字闪烁效果的三种方式示例代码"></p>
<div class="jb51code">
<pre class="brush: css;">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blink{
display: inline-block;
font-size: 46px;
margin: 10px;
background: linear-gradient(left, #f71605, #e0f513);
background: -webkit-linear-gradient(left, #f71605, #e0f513);
background: -o-linear-gradient(right, #f71605, #e0f513);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation:scratchy 0.253s linear forwards infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation:scratchy 0.253s linear forwards infinite;
-moz-animation: scratchy 0.253s linear forwards infinite;
-ms-animation: scratchy 0.253s linear forwards infinite;
-o-animation: scratchy 0.253s linear forwards infinite;
}
@keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
}
99% {
background-position: 60px -60px;
}
100% {
background-position: 0 0;
}
}
/* 添加兼容性前缀 */
@-webkit-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
}
99% {
background-position: 60px -60px;
}
100% {
background-position: 0 0;
}
}
@-moz-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
}
99% {
background-position: 60px -60px;
}
100% {
background-position: 0 0;
}
}
@-ms-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
}
99% {
background-position: 60px -60px;
}
100% {
background-position: 0 0;
}
}
@-o-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
}
99% {
background-position: 60px -60px;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="blink">星星之火可以燎原</div>
</body>
</html> </pre>
</div>
<h3>3.通过设置text-shadow的值，来实现文字阴影闪烁的效果，效果图：</h3>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="css3 实现文字闪烁效果的三种方式示例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMTA0MjUvYl8wXzIwMjEwNDI1MTkyNjIzMTk0OS5naWY=" title="css3 实现文字闪烁效果的三种方式示例代码"></p>
<div class="jb51code">
<pre class="brush: css;">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blink{
font-size: 46px;
color:#4cc134;
margin: 10px;
animation: changeshadow 1s ease-in infinite ;
/* 其它浏览器兼容性前缀 */
-webkit-animation: changeshadow 1s linear infinite;
-moz-animation: changeshadow 1s linear infinite;
-ms-animation: changeshadow 1s linear infinite;
-o-animation: changeshadow 1s linear infinite;
}
@keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
/* 添加兼容性前缀 */
@-webkit-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
@-moz-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
@-ms-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
@-o-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
</style>
</head>
<body>
<div class="blink">星星之火可以燎原</div>
</body>
</html> </pre>
</div>
<p>感谢博客：<a rel="nofollow" target="_blank" href="https://blog.csdn.net/art_people/article/details/104768666/">https://blog.csdn.net/art_people/article/details/104768666/</a></p>
<p>到此这篇关于css3 实现文字闪烁效果的三种方式示例代码的文章就介绍到这了,更多相关css3文字闪烁内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！</p>
<div class="clearfix">
<span id="art_bot" class="jbtestpos"></span>
</div> </div>
<div class="tags">
相关标签： <a href="/t/CSS3/" target="_blank">
CSS3 </a>
<a href="/t/%E6%96%87%E5%AD%97%E9%97%AA%E7%83%81/" target="_blank">
文字闪烁 </a>
</div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/138613.html">
华为鸿蒙系统如何开启智慧助手?鸿蒙系统开启或关闭智慧助手的方法 </a>
</p>
<p>
下一篇： <a href="/article/138615.html">
M1Max gpu显卡怎么样 M1Max gpu相当于什么显卡 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2015535.html" target="_blank" title="CSS3实现文字波浪线效果示例代码">
<h2>
CSS3实现文字波浪线效果示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1856206.html" target="_blank" title="纯CSS3实现移动端展开和收起效果的示例代码">
<h2>
纯CSS3实现移动端展开和收起效果的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1844199.html" target="_blank" title="CSS3制作文字半透明倒影效果的两种实现方式">
<h2>
CSS3制作文字半透明倒影效果的两种实现方式 </h2>
</a>
</li>
<li>
<a href="/article/1768740.html" target="_blank" title="CSS3实现翘边的阴影效果的代码示例">
<h2>
CSS3实现翘边的阴影效果的代码示例 </h2>
</a>
</li>
<li>
<a href="/article/1607851.html" target="_blank" title="CSS3实现图片抽屉式效果的示例代码">
<h2>
CSS3实现图片抽屉式效果的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1549312.html" target="_blank" title="CSS3实现模糊背景的三种效果示例">
<h2>
CSS3实现模糊背景的三种效果示例 </h2>
</a>
</li>
<li>
<a href="/article/1499299.html" target="_blank" title="css3实现书本翻页效果的示例代码">
<h2>
css3实现书本翻页效果的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1447648.html" target="_blank" title="css3 实现文字闪烁效果的三种方式示例代码">
<h2>
css3 实现文字闪烁效果的三种方式示例代码 </h2>
</a>
</li>
<li>
<a href="/article/861908.html" target="_blank" title="CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享">
<h2>
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享 </h2>
</a>
</li>
<li>
<a href="/article/827137.html" target="_blank" title="CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享">
<h2>
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>