css动画让⽂字⼀⾏⼀⾏逐渐显⽰这⼏天在做⼀个年终总结的活动，需要将显⽰的内容以动画的形式逐渐显⽰，
⽽且还要使⽤轮播的效果显⽰好⼏页，每页内容都不同
其实简单的css就可以实现，但是css代码太长，就写了个循环⽤js实现啦我是在Vue的基础上写的，
2、每页轮播页⾯设置类名 swiper1，，content_box是每页的内容
<div class="swiper-slide swiper2">
<div class="content_box">
<p>2018年01⽉01⽇</p>
<p>故事与你，不期⽽遇</p>
</div>
<div class="content_box">
<p >你的第⼀篇作品</p>
<p>《我的⼼⾥也有⿁》</p>
<p>与我们见⾯</p>
</div>
<div class="content_box">
<p>⾄此，你已创作</p>
<p> ⽂章</p>
</div>
</div>
3、定义动画
@keyframes  ani{
0%{  opacity:0; }
100%{ opacity:1; }
}
4、写个动画的⽅法
js文字动画特效animation() {
var start = 2;  //开始时间
var end;
for(var j =2; j <8; j++) {        //循环有多少页
for(var i= 1; i < 5; i++) {    //循环每页的内容
end = start + 0.4      //结束时间=开始时间+0.4s
$('.swiper'+j+' .content_box:nth-child('+i+')').css('animation','ani '+start+'s '+end+'s both')
start = end;  //每⾏内容结束将结束时间赋值给下⼀⾏开始时间
}
start = start + 1  //每页翻页的时候防⽌时间间隔太短动画效果不明显，所以开始时间+1s
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。