全百科精品资源分享
免费优质资源下载平台

分享给WordPress站点添加Font Awesome字体图标闪烁CSS3特效代码

播放按钮
文章目录

分享给WordPress站点添加Font Awesome字体图标闪烁CSS3特效代码,给自己网站加上图标闪烁样式,这样的效果一下便会吸引读者,下面我们一起分析如何实现这种特效。

CSS3的功能强大,animation实现的动画更让我们无法想象。

这里主要使用了animation过定义多个关键帧以及每个关键帧中元素的属性值来实现的动画效果,具体参数,参考CSS3手册!

效果演示

实现代码

HTML结构代码:

<div class="online"><a href="#"  class="toolbar-item "><i class="fa fa-qq"></i></a></div>

CSS3样式代码:

/* 定义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; }
}
.online .fa-qq {
    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;
}

PS:QQ图标引用了字体文件。Font Awesome图标字体

Download WordPress Themes Free
Download WordPress Themes
Download Premium WordPress Themes Free
Premium WordPress Themes Download
free download udemy course
download micromax firmware
Download Nulled WordPress Themes
online free course

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0) 打赏
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 分享给WordPress站点添加Font Awesome字体图标闪烁CSS3特效代码
分享到: 更多 (0)

评论 抢沙发

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

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏