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

时间:2021-03-24 08:31:01

先看效果

abcd

这个效果也比较简单,利用keyframes对文字的大小、透明度及颜色做循环显示。

CSS

 <style>
@-webkit-keyframes flash {
0%{
opacity:;
}
50%{
opacity:;
color: #ff0000;
font-size: 18px;
}
100%{
opacity:;
}
}
@keyframes flash {
0%{
opacity:;
}
50%{
opacity:;
color: #ff0000;
font-size: 18px;
}
100%{
opacity:;
}
}
.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>