CSS3+HTML5特效6 - 闪烁的文字
2014-02-19 22:37
357 查看
先看效果
abcd
这个效果也比较简单,利用keyframes对文字的大小、透明度及颜色做循环显示。
CSS
HTML
abcd
这个效果也比较简单,利用keyframes对文字的大小、透明度及颜色做循环显示。
CSS
<style> @-webkit-keyframes flash { 0%{ opacity: 0; } 50%{ opacity: 1; color: #ff0000; font-size: 18px; } 100%{ opacity: 0; } } @keyframes flash { 0%{ opacity: 0; } 50%{ opacity: 1; color: #ff0000; font-size: 18px; } 100%{ opacity: 0; } } .flash{ position: relative; top: 10px; left: 10px; width: 200px; color: #0000ff; -webkit-animation:flash 1.5s infinite cubic-bezier(1,0,0.5,0) ; animation:flash 1.5s infinite cubic-bezier(1,0,0.5,0) ; } </style>
HTML
<div class="flash">abcd</div>
相关文章推荐
- CSS3+HTML5特效5 - 震动的文字
- CSS3+HTML5特效4 - 横向无缝滚动
- HTML5画布线宽教程
- formData_html5_map标签
- 22个HTML5 技巧
- html5开发之viewport使用(页面缩放)
- HTML5画布颜色教程
- HTML5 LocalStorage 本地存储
- html5多文件上传预览及进度条 思路
- 解决HTML5新标签不兼容的问题
- [Mugeda HTML5技术教程之19]制作可定制贺卡
- HTML5
- [应用模板]HTML5颜色选择
- [应用模板]HTML5日期选择
- 详解HTML5新特性
- HTML5+CSS3 表格设计(Table)
- IE9对HTML5中一部分属性不提供支持的原因
- HTML5 标签 hgroup 已经被废除
- 开发者对HTML5开发热情不减
- [Mugeda HTML5技术教程之19]制作可定制贺卡