css之animation的使用技巧

荆轲刺秦王

活动中需要对中奖记录进行公示，就像这样：

具体的数据是从后台传到前台的html页面的，具体是这样：

<div class="header">
		<div class="zhongjiang" style="position: relative;white-space: nowrap;overflow: hidden; padding-left:5em;"><span style="width: 5em; position: absolute;left:0;top:0;background-color:#ffac33;z-index: 100;">中奖公示：</span> <div style="position: absolute;top:0;height:100%;" id="zjbox"><p>
			<volist name="loList" id="vo">
				{$vo.nickname}获得{$vo.prize}  
			</volist>
		</p></div></div>
	</div>

想要达到上图中我们想要的样式，就需要使用到 css 中的 animation 了：

因为我们想要它在一行内来回循环播放，所以要用到：white-space:nowrap;

接下来就是重头戏 animation 了：animation：loop 20s linear infinite;

看教程给的标准语法：

接下来我们对：animation-name 进行移动规则定义：

                @-webkit-keyframes loop {
			0%{margin-left: 0%;}
			100%{margin-left: -100%;}
		}
		@-o-keyframes loop {
			0%{margin-left: 0%;}
			100%{margin-left: -100%;}
		}
		@-moz-keyframes loop {
			0%{margin-left: 0%;}
			100%{margin-left: -100%;}
		}
		@-ms-keyframes loop {
			0%{margin-left: 0%;}
			100%{margin-left: -100%;}
		}

有一点需要注意的是：这个时间的设定：animation-duration ,因为我们轮播的数据是从后台传过来的，所以需要注意这个数据的量，因为如果是很少的数据，在一定时间内轮播完，页面效果就会显得很慢，但如果是非常多的数据，在同等时间内，轮播的速度是非常快的，这和后台传过来的数据量有关，我的解决办法是：在从数据库查询的时候加一个 limit 分页，这样我每次都只查询出十条数据，在根据 id 进行降序排序，这样一来就固定了数据量，不用担心轮播速度失控的问题了。