<div id="container">
这里查看“<span class="blink">闪烁效果</span>”,ENjoy!
</div>

/* 定义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;
}

  

css3 文字闪动效果的更多相关文章

  1. CSS3文字立体效果

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. 【转载】CSS3 文字溶解效果

    代码如下: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <ti ...

  3. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  4. 常用CSS3效果:用text-shadow做CSS3 文字描边

    思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...

  5. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

  6. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  7. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  8. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  9. CSS环绕球体的旋转文字-3D效果

    代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

随机推荐

  1. HPCC 登录总结

    最近开始做NGS的分析,数据明显更大,在自己的机子上面做有些不现实了,需要登录高性能计算机. 1. 目录结构: home directory: /auto/rcf-40/USERNAME -- onl ...

  2. Sqlserver 远程连接的 TCP/IP 和 Named Pipes的区别

    TCP/IP:  TCP/IP是 Internet 上广泛使用的通用协议.它与互连网络中硬件结构和操作系统各异的计算机进行通信.TCP/IP包括路由网络流量的标准,并能够提供高级安全功能.它是目前在商 ...

  3. iOS中的多线程及GCD

    多线程中的一些概念 //任务:代码段  方法  线程就是执行这些任务 //NSThread类 创建线程 执行线程 [NSThread isMainThread]//判断是否是主线程 #import & ...

  4. CentOS6下搭建OpenVPN服务器

    • OpenVPN简介 OpenVPN是一个用于创建虚拟专用网络(Virtual Private Network)加密通道的免费开源软件.使用OpenVPN可以方便地在家庭.办公场所.住宿酒店等不同网 ...

  5. Linux系统下查看硬件信息命令大全

    导读 有许多命令可以用来查看 Linux 系统上的硬件信息.有些命令只能够打印出像 CPU 和内存这一特定的硬件组件信息,另外一些命令可以查看多种硬件组件的信息. 这个教程可以带大家快速了解一下查看各 ...

  6. 实战网卡bond

    一.什么是网卡bond 所谓bond,就是把多个物理网卡绑定成一个逻辑上的网卡,使用同一个IP工作,在增加带宽的同时也可以提高冗余性,一般使用较多的就是来提高冗余,分别和不同交换机相连,提高可靠性,但 ...

  7. sencha 环境配置

    sencha generate app MyApp MyApp 首先需要注意的是安装 sencha 并执行相关命令. 搞了老半天才知道 想要创建空项目首先 必须的在sdk 目录下才可以.好像据说第二次 ...

  8. Educational Codeforces Round 15 A dp

    A. Maximum Increase time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. Oracle语句

    分页查询: select rn,last_name,salary from( select rownum rn,last_name,salary from( select last_name,sala ...

  10. 关于获取目录的N种方法 的汇总

    前段时间在Global.asax.cs中的Session_End中使用Server.MapPath() 出现"服务器操作在此上下文中不可用"异常. 网络上给出的解决方案:Syste ...