欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3 实现文字闪烁效果的三种方式示例代码

程序员文章站 2022-06-18 21:56:07
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/1447647.html"> 一加手表适配手机有哪些 一加手表适配机型一览 </a> </p> <p> 下一篇: <a href="/article/1447649.html"> 介绍有效的四步骤降低显卡温度的方法 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2291366.html" target="_blank" title="css文字从右边到左的滚动效果怎么实现?(代码示例)"> <h2> css文字从右边到左的滚动效果怎么实现?(代码示例) </h2> </a> </li> <li> <a href="/article/2290169.html" target="_blank" title="浅谈JS实现倒计时效果的两种方式(代码示例)"> <h2> 浅谈JS实现倒计时效果的两种方式(代码示例) </h2> </a> </li> <li> <a href="/article/2255918.html" target="_blank" title="Android TextView实现带链接文字事件监听的三种常用方式示例"> <h2> Android TextView实现带链接文字事件监听的三种常用方式示例 </h2> </a> </li> <li> <a href="/article/2250558.html" target="_blank" title="CSS3实现背景透明文字不透明的示例代码"> <h2> CSS3实现背景透明文字不透明的示例代码 </h2> </a> </li> <li> <a href="/article/2246990.html" target="_blank" title="CSS3下的渐变文字效果实现示例"> <h2> CSS3下的渐变文字效果实现示例 </h2> </a> </li> <li> <a href="/article/2238174.html" target="_blank" title="css3实现文字扫光渐变动画效果的示例"> <h2> css3实现文字扫光渐变动画效果的示例 </h2> </a> </li> <li> <a href="/article/2215331.html" target="_blank" title="css3实现3D文本悬停改变效果的示例代码"> <h2> css3实现3D文本悬停改变效果的示例代码 </h2> </a> </li> <li> <a href="/article/2214595.html" target="_blank" title="Android TextView实现带链接文字事件监听的三种常用方式示例"> <h2> Android TextView实现带链接文字事件监听的三种常用方式示例 </h2> </a> </li> <li> <a href="/article/2207455.html" target="_blank" title="CSS3实现背景透明文字不透明的示例代码"> <h2> CSS3实现背景透明文字不透明的示例代码 </h2> </a> </li> <li> <a href="/article/2204459.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>