马路上有很多用来装饰的滚动字幕，有些还闪闪发光，看起来很炫。本文通过 HTML5 + CSS3 的技术来实现这一特效(闪光字)。

闪光字，顾名思义就是会发光并会闪烁的字体。简称闪光字。

上图是我在网上寻找的一个类似的闪光字效果特效。

效果看起来很炫，实现起来很简单。下面分别是相关实现的 html 代码：

这里查看“ 闪烁效果”，ENjoy!

下面是相关 CSS 代码：

/*定义页面基础 CSS*/ body{ font-family: 'microsoft yahei',Arial,sans-serif; color: #EFEFEF; background: #222; text-align: center; margin-top: 50px; } /* 定义 keyframe 动画，命名为 blink */ @keyframes blink{ 0%{opacity: 1;} 50%{opacity: 1;} 50.01%{opacity: 0;} /* 注意这里定义 50.01%立刻透明度为０，可以设置闪烁效果 */ 100%{opacity: 0;} } /* 添加兼容性前缀 */ @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } /* 定义 blink 类*/ .blink{ animation: blink .75s linear infinite; /* 其它浏览器兼容性前缀 */ -webkit-animation: blink .75s linear infinite; -moz-animation: blink .75s linear infinite; -ms-animation: blink .75s linear infinite; -o-animation: blink .75s linear infinite; color: #dd4814; }

代码很简单，上面主要做了一些多浏览器兼容性处理。

【注：本文源自网络文章资源，由站长整理发布】

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：HTML5 + CSS3 实现闪光字

更多推荐

python简单心形代码爱情闪字_HTML5 + CSS3 实现闪光字