.advice_a{
width:59px
height:21px
padding-top:32px
background:url("cai.png") no-repeat 0 0
}
p{
width:59px
height:21px
line-height:21px
text-align:center
font-size:12px
margin:0
}
<div class="advice_a">
<p>数据</p>
</div>
顶和踩的写法类似,换个背景就行了
我的思路是:
1、每句用一个span或者p标签,包裹起来。--为什么这么做?因为,要单独控制样式啊
2、然后依次写动画。-- 结合 keyframes和animation写帧动画。
3、记得给每个动画写延迟时间。--让不同句子出现时间不一样。
举个例子:
<div class="box"><p>这是第1个p</p>
<p>这是第2个p</p>
<p>这是第3个p</p>
</div>
CSS:
@keyframes ani{0%{ opacity:0 }
100%{ opacity:1 }
}
.box p:nth-child(1){
animation: ani 0.2s both
}
.box p:nth-child(2){
animation: ani 0.2s 0.2s both
}
.box p:nth-child(3){
animation: ani 0.2s 0.4s both
}