用CSS3怎样做文字闪烁的效果？办法是什么？
发布时间：2022-01-20 16:30:29 所属栏目：编程 来源：互联网
导读：用CSS3怎样做文字闪烁的效果?我们知道CSS3的功能是比较强大的，可以实现各种比较炫酷的效果。文字闪烁的展现效果有很多，下文就给大家分享三种做文字闪烁的效果方式，感兴趣的朋友可以参考。 1.通过改变透明度来实现文字的渐变闪烁，效果图： !DOCTYPE html
|
<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> （编辑：宿州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |