Rumah >hujung hadapan web >tutorial css >纯CSS如何实现图片轮播
纯CSS如何实现图片轮播
- 醉折花枝作酒筹asal
- 2021-04-02 14:42:024219semak imbas
在css中，可以使用animation属性和@keyframes规则来实现图片轮播效果。只需要先使用@keyframes创建动画；然后使用animation属性设置动画所需时间，速度以及次数等即可。
本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑
首先准备相同大小的多个图片，将要展示图片横排放在一个图片容器里面。在图片容器外再加一个展示容器，展示容器大小为图片大小，给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值。
动画效果分为切换和停留两部分，自定义动画阶段与图片数量相关，动画各阶段偏移值与图片大小相关。
本文中示例的是有第一个图片切换到最后一张图片。
HTML
<body>
<div id="container">
<div id="photo">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
</div>
</body>解析：
这里创建了三个 img 元素，img 元素外面是图片容器，图片容器外面是展示容器。
CSS
<style type="text/css">
#container {
width: 400px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}
</style>效果图：
解析：
展示容器大小和图片大小一致；
图片添加 float 效果，不用考虑麻烦的 margin 问题；
由于示例只有三个图片，所以添加了三个动画阶段，每一阶段都是通过设置递增的 margin-left 值达到切换的效果；
设置的动画阶段（如：35%~60%）是动画停留部分，和上一阶段空余时间（如25%~35%）即为动画切换部分，各部分时间长短需要自己把控。
推荐学习：《css视频教程》
Atas ialah kandungan terperinci 纯CSS如何实现图片轮播. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css怎么实现内容不可选Artikel seterusnya：css怎么实现超出两行显示省略