HTML+CSS项目实践一：单纯利用CSS制作图片轮播效果（不使用JS）

知识点：CSS3 animation 属性、CSS3 @keyframes 规则

实现效果：3张图片进行轮播显示

制作思路：

1、制作一个展示动画效果的盒子，这个盒子里会一次展示3张图片。因此展示盒子和3张图片的宽高要设置一样。

2、把3张图片横向排列在一个图片盒子里，使用float属性，控制定位。

3、给图片盒子添加自定义动画，控制在不同时间段，展示不同的图片。（通过margin-left属性来控制展示的位置）

关键属性：

1、animation 属性是一个简写属性，用于设置六个动画属性。（本例中设置了4个属性）

2、@keyframes规则是用来创建动画的。使用方法：@keyframes 动画名称{ };

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#lbt {
	width: 400px;/*设置轮播区域的宽高，即父级盒子宽高*/
	height: 300px;
	overflow: hidden;/*设置超出部分隐藏，因为photo盒子超出父级盒子blt的宽度*/
	margin:10px auto;/*设置盒子水平居中*/
}
 
#photo {
	width: 1200px;/*每张图片宽度400px，一共放3张图片，所以photo盒子宽度为400*3=1200px*/
	animation: move 5s ease-out infinite;/*设置动画名称叫move，完成此动画需要时长5s,动画类型ease-out即以慢速结束的过渡效果，动画播放次数infinite即无限次*/
}
 
#photo > img {/*子选择器，指定photo里的img元素*/
	float: left;/*所有的图片都向同一个方向浮动*/
	width: 400px;/*设置所有的图片具有同样的宽高，因为他们共用一个div盒子，在这个盒子里进行轮换展示*/
	height: 300px;
}
 
@keyframes move {/*以百分比来规定改变发生的时间，0% 是动画的开始时间，100% 动画的结束时间。*/
	0%, 20% {
		margin-left: 0;
	}
	40%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

</style>
</head>

<body>

  <div id="lbt">
        <div id="photo">
            <img src="1.jpg" />
            <img src="2.jpg" />
            <img src="3.jpg" />
        </div>
  </div>
</body>
</html>

注意：

动画阶段数量和图片数量有关，如本例中有3张图片，所以设置了3个动画阶段
设置的动画阶段（如：40%~60%）是动画停留部分，和上一阶段空余时间（如20%~30%）是动画切换部分的时间，各部分时间长短的分配，可以自己把控。
通过控制不同阶段的margin-left属性值，来控制显示的图片。这个值根据图片宽度进行设置。

代码练习：制作一个垂直方向的图片轮播效果

补充知识点：

1、animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

==============================这里是结束分割线=============================

HTML+CSS项目实践一：单纯利用CSS制作图片轮播效果（不使用JS）

猜你喜欢