<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. session过期时ajax请求刷新浏览器

    ajax前置处理实现异步请求session过期时跳转登录页面 function checkLogin(json) { if (typeof(json) === 'string' && ...

  2. js获取非行内样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. MySql配置方法,批处理进行MySql配置

    @echo 注意右击管理员运行 @pause @echo .添加环境变量 @echo .my.ini中添加如下配置 @echo [mysqld] @echo basedir=C:\Program Fi ...

  4. SpringMVC使用@ResponseBody时返回json的日期格式、@DatetimeFormat使用注意

    一.SpringMVC使用@ResponseBody时返回json的日期格式 前提了解: @ResponseBody 返回json字符串的核心类是org.springframework.http.co ...

  5. c 函数及指针学习 6

    不完整声明 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 /* 方法一   */ struct tag_a{ ...

  6. makefile--目标搜索(八)

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 在一个较大的工程中,一般会将源代码和二进制文件(.o 文件和可执行文件)安排在不同的目录来进行区 ...

  7. leetcode 148. Sort List ----- java

    Sort a linked list in O(n log n) time using constant space complexity. 排序,要求是O(nlog(n))的时间复杂度和常数的空间复 ...

  8. 越狱Season 1-Episode 12:Odd Man Out

    Season 1-Episode 12:Odd Man Out -Sorry to keep you waiting. 抱歉让你等了半天 -Oh, it's, uh, not a problem. 嗯 ...

  9. c笔记

    关于数组的操作: 初始化: 完全初始化: Int a[5] = {1,3,4,5,6}; 不完全初始化:   未被初始化的元素自动为零 Int a[5] = {1, 3, 4}; 不初始化,  所有元 ...

  10. 黑马程序员——JAVA基础之单列设计模式

    ------- android培训.java培训.期待与您交流! ---------- 单列设计模式是面试中的一个常考的点,所谓单例模式就是说对象在内存中只能存在一个.如果有其他变量是该类对象,那么他 ...