趁着空挡赶紧写！
一、数据滚动
这节想做的效果是在一个框内数据可以循环的向上滚动，只能说功能仿照永夜君王贴吧的捧场动态，样式就不严格一样了。
首先要呈现一个边框出来
#rollText{
position: absolute;
width: 400px;
border: 1px solid #333333;
margin-top: 300px;
height: 30px;
top:30px;
right: 50px;
overflow: hidden;
}
<div id="rollText">
<p>这是第一行数据</p>
<p>这是第二行</p>
<p>第三行也出来了</p>
<p>这是第四行数据</p>
<!--<p>这是第五行数据</p>-->
<!--<p>这是第六行数据</p>-->
<!--<p>这是第七行数据</p>-->
<!--<p>这是第八行数据</p>-->
</div>
这里的位置是放在三角形的右边，多列显示的上边。注释掉的几行是扩展用的，现在的展示只是单列显示滚动，如下图
这四行数据可以循环的滚动，目前遇到一个困境，四个数据有间距，可以查看
简单数据滚动实现。接下来接着完善。
二、修改两个数据间有空白
重新调节动画的百分比，得到动画效果2
/*动画效果2*/
@-webkit-keyframes anim1{
0% {top: 15px;opacity: 1}
100% {top: -105px;opacity: 1}
}
@-webkit-keyframes anim2{
0% {top: 45px;opacity: 1}
100% {top: -75px;opacity: 1}
}
@-webkit-keyframes anim3{
0% {top: 75px;opacity: 1}
100% {top: -45px;opacity: 1}
}
@-webkit-keyframes anim4{
0% {top: 105px;opacity: 1}
100% {top: -15px;opacity: 1}
}
这里的滚动效果基本上理想了，两个数据无间隙的链接，但是有一个缺陷：数据滚动结束和首个数据衔接时有一个小的空白。依然不是很理想，仔细思考觉得应该还可以解决，差点走近死胡同了，想转向js处理的，又不知道能不能处理，最后想想应该是自己想错了，所以有了动画效果3。
三、动画效果3
这次着重将思考问题的点放在收尾交接的地方，自己在纸上画了又画，最终理清了思路。
1、首行数据填充一半（下半部分），尾行数据填充上半部分
2、单独计算尾行数据填满展示的条框时首行数据应该在的位置，此时首行数据被分成了两个部分
3、单独计算尾行数据在首次加载时应移动的距离（条框不显示的时候即可做其他处理）。
最终的样式调整如下：
/*动画效果3*/
@-webkit-keyframes anim1{
0% {top:15px; opacity:1}
37.5% {top:-30px; opacity:1}
37.6% {top:-30px;opacity:0}
74.9% {top:45px;opacity:0}
75% {top:45px;opacity:1}
100% {top:15px;opacity:1}
}
@-webkit-keyframes anim2{
0%{top:45px;opacity:1}
100%{top:-75px;opacity:1}
}
@-webkit-keyframes anim3{
0%{top:75px;opacity:1}
100%{top:-45px;opacity:1}
}
@-webkit-keyframes anim4{
0%{top:-15px;opacity:1}
25%{top:-45px;opacity:1}
25.9%{top:-45px;opacity:0}
62.4%{top:30px;opacity:0}
62.5%{top:30px;opacity:1}
100%{top:-15px;opacity:1}
}
代码已同步到github，包括几次尝试的代码也上传了，最终的动画3是想要的结果，动画1、动画2在代码里已注释，需要的自行打开。githut地址：
https://github.com/dwenb/webLearning。
初始web系列就此结束，下一章做一个总结。