css动画让文字一行一行逐渐显示

这几天在做一个年终总结的活动，需要将显示的内容以动画的形式逐渐显示，

而且还要使用轮播的效果显示好几页，每页内容都不同

其实简单的css就可以实现，但是css代码太长，就写了个循环用js实现啦我是在Vue的基础上写的，

1、轮播可以使用插件swiper，使用可以参考 https://www.swiper.com.cn/，或者我下篇文章介绍

2、每页轮播页面设置类名 swiper1，swiper2...，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、写个动画的方法

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}

css动画让文字一行一行逐渐显示相关推荐

CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
利用CSS动画制作 Html 表格数据滚动显示
直接上图看最终实现效果: DataV里有这个效果,看起来高大上,实际自己开发也不难实现.实现的方法很多,下面是本人的一种实现方案,分享给大家. 这个效果需要解决2个问题: 1:首尾的数据衔接: 2:c ...
html 标签使内容在一行,css如何使文字在一行上？
CSS是一种定义样式结构如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件. css可以使用white-space:nowr ...
css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
css中text文字超出宽度省略号显示并鼠标悬停显示剩余全部：
代码:记得写在渲染文字的那个标签class上: display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: bre ...
CSS实现标题文字过长部分显示省略号的方法
2019独角兽企业重金招聘Python工程师标准>>> 单行效果: <!DOCTYPE html> <html lang="en">< ...
html标题过长如何隐藏,CSS实现标题文字过长部分显示省略号的方法
单行效果: Document 四岁的弗拉吉米尔在西红柿上挖了个洞,她用勺子搅了半天,突然哭了起来."孩子,怎么了?为什么哭呢?"妈妈问."你们都说西红柿里有维生素,可我怎 ...
CSS中的text-overflow属性详解（控制文字在一行显示，超出部分加省略号）
text-overflow: ellipsis; 表示当文本内容超出所在容器的宽度时,用省略号来代替超出的部分. white-space:nowrap; 表示文本不换行. overflow: hidd ...
css让文字在一行内显示
css让文字在一行内显示 1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{width:100px;word-break:keep-all;white-space:nowrap; } 2.例 ...

css动画让文字一行一行逐渐显示

css动画让文字一行一行逐渐显示相关推荐

最新文章

热门文章