您的位置:首页 > Web前端 > HTML5

CSS3+HTML5特效6 - 闪烁的文字

2014-02-19 22:37 357 查看
先看效果

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: