css3 文字闪动效果
<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 文字闪动效果的更多相关文章
- CSS3文字立体效果
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 【转载】CSS3 文字溶解效果
代码如下: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <ti ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- CSS环绕球体的旋转文字-3D效果
代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...
随机推荐
- clone 深拷贝 浅拷贝
1. 定义:知道一个对象,但不知道类,想要得到该对象相同的一个副本,在修改该对象的属性时,副本属性不修改,clone的是对象的属性 2. 意义:当一个对象里很多属性,想要得到一个相同的对象,还有set ...
- c++11编码规范 NULL还是nullptr
0和nullptr/NULL 至于指针(地址值),根据实际选择用0.NULL还是nullptr.对使用了C++11特性的项目,选用nullptr:对于C++03项目,推荐NULL,因为它像是一个指针
- Think Python - Chapter 15 - Classes and objects
15.1 User-defined typesWe have used many of Python’s built-in types; now we are going to define a ne ...
- ion torrent ion proton
https://www.youtube.com/watch?v=6Is3W7JkFp8 NGS 的视频 说的不错 一个做癌症的教授讲的 Ion Torrent™ next-generation seq ...
- json数据的jquery操作和asp.net后台操作
jquery操作 json对象创建 var item0={"a":"val1","b":"val2"}; json对象字 ...
- (转)Hadoop数据类型
来源: http://www.cnblogs.com/anny-1980/articles/2608097.html BooleanWritable:标准布尔型数值 ByteWritable:单字节数 ...
- root密码
安装完Ubuntu后忽然意识到没有设 置root密码,不知道密码自然就无法进入根用户下.到网上搜了一下,原来是这麽回事.Ubuntu的默认root密码是随机的,即每次开机都有一个新的 root密码.我 ...
- ubuntu 14.04 apache maven 安装
下载maven http://maven.apache.org/download.cgi 解压 tar -xzvf apache-maven-3.0.5-bin.tar.gz -C /usr/loc ...
- HDU 5955 Guessing the Dice Roll
HDU 5955 Guessing the Dice Roll 2016 ACM/ICPC 亚洲区沈阳站 题意 有\(N\le 10\)个人,每个猜一个长度为\(L \le 10\)的由\(1-6\) ...
- spark Streaming的Receiver和Direct的优化对比
Direct 1.简化并行读取:如果要读取多个partition,不需要创建多个输入DStream然后对它们进行union操作.Spark会创建跟Kafka partition一样多的RDD part ...