用CSS3怎样做文字闪烁的效果?办法是什么?
发布时间:2022-01-20 16:30:29 所属栏目:编程 来源:互联网
导读:用CSS3怎样做文字闪烁的效果?我们知道CSS3的功能是比较强大的,可以实现各种比较炫酷的效果。文字闪烁的展现效果有很多,下文就给大家分享三种做文字闪烁的效果方式,感兴趣的朋友可以参考。 1.通过改变透明度来实现文字的渐变闪烁,效果图: !DOCTYPE html
用CSS3怎样做文字闪烁的效果?我们知道CSS3的功能是比较强大的,可以实现各种比较炫酷的效果。文字闪烁的展现效果有很多,下文就给大家分享三种做文字闪烁的效果方式,感兴趣的朋友可以参考。 1.通过改变透明度来实现文字的渐变闪烁,效果图: <!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> 如果不需要渐变闪烁效果,我们可以在keyframe动画中定义50%,50.1%的opacity的值。如下: @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } 2.利用背景图片或者背景渐变,实现文字颜色的闪烁效果,效果图: <!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> 3.通过设置text-shadow的值,来实现文字阴影闪烁的效果,效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> (编辑:宿州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |