CSS实现简单的无缝轮播效果
由于还没有接触到JS实现动态效果，但是比较想实现页面的简单轮播效果，翻了翻CSS标签，
发现只有CSS3也可以实现动画效果，即通过animation动画标签，来实现动态的页面效果。
以下是HTML模块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画轮播</title>
<link rel="stylesheet" type="text/css" href="../css/day12-2.css" />
</head>
<body>
<div class="container">
<div class="photo">
<img src="../images/img12-2-1.jpg" />
<img src="../images/img12-2-2.jpg" />
<img src="../images/img12-2-3.jpg" />
<img src="../images/img12-2-1.jpg" />
<!-- 利用的原理是最后一张直接覆盖在第一张上面
在开始第二轮时，因其图像相同，而不会产生闪烁的效果，以达到无缝轮播的效果
因为每一轮新的开始即是第一张图片在原点位置-->
</div>
</div>
</body>
</html>
以下是CSS模块
*
{
margin: 0px;
padding: 0px;
}
.container
{
width: 533px;
height: 300px;
background: #00FFFF;
overflow:hidden;
}
/* 起到一个相框的作用,隐藏图片 */
.photo
{
width: 9999px;
animation: switch 5s ease-out infinite;
}
/* 循环播放的容器的大小，要能装的下所有的图片 不然会间断显示 为图片按滑动主体*/
.container img
{
display: block;
float: left;
}
/* 调整图片位置,实现从左至右滑动 */
@keyframes switch{
0%
{
transform:translatex(0%);
}
20%
{
transform:translatex(0%);
}
25%
{
transform:translatex(-533px);
}
45%
{
transform:translatex(-533px);
}
50%
{
transform:translatex(-1066px);
}
70%
{
transform:translatex(-1066px);
}
100%
{
transform:translatex(-1599px);
}
}
/* 其实现的是动态移动 */
实现的效果图：
其中，增加第一幅图为最后一张很关键，如果没有的话，在循环下一轮时会出现
闪烁的情况。
虽然css也能实现轮播效果，但是相对于js实现来说，功能性就弱了很多，
无法控制暂停与播放，无法与用户产生交互，无法监听到状态的而变化等等，
但是好处也很明显嘛！那就是。。。够简单
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
