CSS怎么让一段文字一句一句的显示出来

html-css028

CSS怎么让一段文字一句一句的显示出来,第1张

我的思路是：

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

}

这个是jq能实现的

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="js/textualizer.min.js"></script>

<script type="text/javascript">

$(function () {

var list = ['当时气喘力竭，全身血污，自忖如去投店。']

var txt = $('#flashtext')

var options = {

duration: 2500, // 每段个字在页面中的停留时间(ms)

rearrangeDuration: 1000, // 单词切换间隔时间(ms)

effect: 'random' // 显示的动画效果：random, fadeIn, slideLeft, slideTop

}

txt.textualizer(list,options)

txt.textualizer('start')

})

</script>