html文字闪烁特效代码,html5字体闪烁

1.通过改变透明度来实现文字的渐变闪烁，效果图：

　　！DOCTYPE htmlhtmlhead/headtitle文字闪烁/titlebodydiv class=blink 星星之火可以燎原/div/正文样式。我的班级{字母间距：5px/*字间距*/颜色：红色；字体粗细：粗体；字体大小：46px}/*定义键架动画，命名为闪烁*/@关键帧闪烁{ 0% {不透明度：1；} 100% {不透明度：0;} }/* 添加兼容性前缀*/@-网络工具包-关键帧闪烁{ 0% {不透明度：1；} 100% {不透明度：0;} } @-moz-关键帧闪烁{ 0% {不透明度：1;} 100% {不透明度：0;} } @-毫秒关键帧闪烁{ 0% {不透明度：1；} 100% {不透明度：0;} } @-o-关键帧闪烁{ 0% {不透明度：1;} 100% {不透明度：0;}}/* 定义眨眼类*/.眨眼{颜色：红色；字体大小：46px动画：眨眼1s线性无限；/* 其它浏览器兼容性前缀*/-WebKit-动画：闪现1s线性无限；蚊子动画：闪现1s线性无限；-ms-动画：闪现1s线性无限；用作复合形式的末尾元音动画：闪现1s线性无限；}样式/html如果不需要渐变闪烁效果，我们可以在键架动画中定义50%,50.1%的不透明的值。如下：

　　@-网络工具包-关键帧闪烁{ 0% {不透明度：1；} 50% {不透明度：1;} 50.01% {不透明度：0;} 100% {不透明度：0;} }

2.利用背景图片或者背景渐变，实现文字颜色的闪烁效果，效果图：

　　！DOCTYPE html html head meta charset= UTF 8 title/title style type= text/CSS .闪烁{显示：内嵌块；字体大小：46px边距：10px背景：线性渐变（左、#f71605、# e0f 513)；背景：-WebKit-线性-渐变(左、#f71605、# e0f 513)；背景：-哦-线性-渐变（右、#f71605、# e0f 513)；-网络工具包-背景-剪辑：文本；-WebKit-文本-填充-颜色：透明；动画：0.253秒的划痕线性向前无限；/* 其它浏览器兼容性前缀*/-WebKit-动画：0.253秒的划痕线性向前无限；-moz-动画：0.253秒线性向前无限；-ms动画：0.253秒的划痕线性向前无限；-o动画：0.253秒的划痕线性向前无限；} @关键帧scratchy { 0% { background-position:0 0；} 25% {背景-位置：0 0;} 26% {背景-位置：20px-20px；} 50% {背景-位置：20px-20px；} 51% {背景-位置：40px-40px；} 75% {背景-位置：40px-40px；} 76% {背景-位置：60px-60px；} 99% {背景-位置：60px-60px；} 100% {背景-位置：0 0;}}/* 添加兼容性前缀*/@-网络工具包-关键帧草稿{ 0% {背景位置：0 0；} 25% {背景-位置：0 0;} 26% {背景-位置：20px-20px；} 50% {背景-位置：20px-20px；} 51% {背景-位置：40px-40px；} 75% {背景-位置：40px-40px；} 76% {背景-位置：60px-60px；} 99% {背景-位置：60px-60px；} 100% {背景-位置：0 0;} } @-moz-关键帧草稿{ 0% {背景位置：0 0；} 25% {背景-位置：0 0;} 26% {背景-位置：20px-20px；} 50% {背景-位置：20px-20px；} 51% {背景-位置：40px-40px；} 75% {背景-位置：40px-40px；} 76% {背景-位置：60px-60px；} 99% {背景-位置：60px-60px；} 100% {背景-位置：0 0;} } @-毫秒-关键帧草稿{ 0% {背景位置：0 0；} 25% {背景-位置：0 0;} 26% {背景-位置：20px-20px；} 50% {背景-位置：20px-20px；} 51% {背景-位置：40px-40px；} 75% {背景-位置：40px-40px；} 76% {背景-位置：60px-60px；} 99% {背景-位置：60px-60px；} 100% {背景-位置：0 0;} } @-o-关键帧草稿{ 0% {背景位置：0 0；} 25% {背景-位置：0 0;} 26% {背景-位置：20px-20px；} 50% {背景-位置：20px-20px；} 51% {背景-位置：40px-40px；} 75% {背景-位置：40px-40px；} 76% {背景-位置：60px-60px；} 99% {背景-位置：60px-60px；} 100% {背景-位置：0 0;} }/style/head body div class= blink 星星之火可以燎原/div/正文/html

3.通过设置text-shadow的值，来实现文字阴影闪烁的效果，效果图：

　　！DOCTYPE html html head meta charset= UTF 8 title/title style type= text/CSS .blink { font-size:46px；颜色：# 4cc134边距：10px动画：changeshadow 1s淡入无限；/* 其它浏览器兼容性前缀*/-WebKit-动画：changeshadow 1s线性无限；蚊子动画：changeshadow 1s线性无限；-ms-animation:变影1s线性无限；-o-动画：变影1s线性无限；} @关键帧更改阴影{ 0% { text-shadow:0 0 4px # 4cc 134 } 50% { text-shadow:0 0 40px # 4cc 134 } 100% { text-shadow:0 0 4px # 4cc 134 } }/*添加兼容性前缀*/@-网络工具包-关键帧更改阴影{ 0% { text-shadow:0 0 4px # 4cc 134 } 50% { text-shadow:0 0 40px # 4cc 134 } 100% { text-shadow:0 0 4px # 4cc 134 } } @-moz-关键帧更改阴影{ 0% { text-shadow:0 4px # 4cc 134 } 50% { text-shadow:0 40px # 4cc 134 } 100% { text-shadow:0 4pc 134 50% { text-shadow:0 0 40px # 4cc 134 } 100% { text-shadow:0 0 4px # 4cc 134 } } @-o-关键帧更改阴影{ 0% { text-shadow:0 0 4px # 4cc 134 } 50% { text-shadow:0 0 40px # 4cc 134 } 100% { text-shadow:0 4px # 4cc 134 } }/style/head body div class= blink 星星之火可以燎原/div /body /html感谢博客：https://博客。 csdn。net/art _ people/文章/详情/104768666/

　　到此这篇关于css3实现文字闪烁效果的三种方式示例代码的文章就介绍到这了，更多相关css3文字闪烁内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。