我的思路是：
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
}
css避免绝对定位覆盖其他元素，首先，在做定位的时候，确实是会出现覆盖的问题，一般在确定left，top，bottom，right这些数值，一般都是精确的测量过，很少出现覆盖，有问题的，通过JS获取到这个块的left，top，bottom，right,动态的来控制，能避免出现这些问题，具体看代码：<html>
<head>
<style>
#div1{
width:460px
height:200px
position:absolute
}
</style>
</head>
<script>
var oDiv = document.getElementById('div1')
var Let = Div.style.left //上下的值，
var Rig = Div.style.top
</script>
<body>
<div id='div1'>
<p>我是测试文字</p>
</div>
</body>
</html>
