轮播图
咋实现:
- 把 n 张照片放在一个盒子里(这个盒子宽度要能装下所有照片,高度跟第二点的盒子一样高).
- 再把这个盒子放在一个你想要实现轮播图的定宽高的盒子里
- 因为里面的盒子比外面的大,所以要使外面的盒子
overflow:hidden
这样让我们只能看到一张照片。
注意:
-
动画效果分为两部分:切换和停留。
-
动画的偏移值和图片大小相关。
-
使用css3实现轮播特效的原理
首先必须保证展示容器大小与图片大小相同,再为图片添加float效果,然后确定插入的图片数量并且为每个图片设置动画阶段,其中每个阶段都是通过使用keyframes设置递增的margin-left值达到切换的效果。
HTML部分:
<div class="container">
<div class="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>
CSS部分:
.container {
width: 400px;
height: 300px;
overflow: hidden;
}
.container photo {
width: 1200px;
animation: switch 5s ease-out infinite;
/*切换 全过程5s, infinite轮播*/
}
.container photo img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%,
25% {
margin-left: 0;
}
35%,
60% {
margin-left: -400px;
}
70%,
100% {
margin-left: -800px;
}
}
CSS3 里面 animation下有个animation-fill-mode 设定动画完成后的状态:
- 默认是none,
- 设为infinite可以轮播,
- 设为forwards 就可以在动画完成后定格在动画最后一帧