• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

HTML5 + CSS3 实现闪光字

JAVA web前端中文站 3年前 (2017-10-08) 1425次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

HTML5 + CSS3 实现闪光字

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

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

 <!-- 这里定义一段文字及其闪烁的部分 //--> <div id="container">  这里查看“<span class="blink">闪烁效果</span>”,ENjoy! </div>

下面是相关 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%立刻透明度为0,可以设置闪烁效果 */   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 实现闪光字
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址