<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. dedecms list 实现noflag

    转自:http://blog.sina.com.cn/s/blog_7e53dd2b0101l3kq.html 替换include下arc.listview.class.php即可 经测试可行 但在更 ...

  2. 三步搞定ISO/GHO安装系统 - imsoft.cnblogs

    高清互动安装系统附件:重装系统视频教程.7z

  3. hdu 5207

    题目大意:给定一组数,取两个数,使得gcd最大.分析:先nlogn预处理出105所有数的因子,然后用cnt数组计数给定数的因子个数,再找到最大的i,满足cnt[i]>=2,复杂度为nlogn.学 ...

  4. iOS学习笔记---c语言第二天

    一.bool布尔类型    c语言没有bool类型,oc里有bool类型 是一种非真即假的数据类型,布尔类型的变量只有yes和no两个值.yes表示表达式是真,no表示表达式是假. 在c语言中认为非0 ...

  5. OpenCV: Canny边缘检测算法原理及其VC实现详解(转载)

    原文地址:http://blog.csdn.net/likezhaobin/article/details/6892176 原文地址:http://blog.csdn.net/likezhaobin/ ...

  6. 递归神经网络(RNN,Recurrent Neural Networks)和反向传播的指南 A guide to recurrent neural networks and backpropagation(转载)

    摘要 这篇文章提供了一个关于递归神经网络中某些概念的指南.与前馈网络不同,RNN可能非常敏感,并且适合于过去的输入(be adapted to past inputs).反向传播学习(backprop ...

  7. POJ 1860 Currency Exchange (最短路)

    Currency Exchange Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 60000/30000K (Java/Other) T ...

  8. error when loading the sdk 发现了元素 d:skin 开头无效内容 转自http://blog.csdn.net/yueqinglkong/article/details/46340571

    把devices.xml这个文件删除,再把sdk里面tools\lib下的这个文件拷贝到你删除的那个文件夹里,重启eclipse

  9. Codeforces Round #138 (Div. 2)

    A. Parallelepiped 枚举其中一边,计算其他两条边. B. Array 模拟. C. Bracket Sequence 栈. D. Two Strings \(pre[i]\)表示第i个 ...

  10. C#实现图片文件到数据流再到图片文件的转换 --转

    /----引入必要的命名空间 using System.IO; using System.Drawing.Imaging; //----代码部分----// private byte[] photo; ...