css3实现轮播图主要是由css：background-position和css3：animation实现。且实现此轮播需要一张四个图横着相连的图片。
注（Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。Safari 和 Chrome 支持替代的 -webkit-animation 属性。）
HTML：
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="slide-box"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
CSS：
<span style="color: #800000;"><style>
@-webkit-keyframes slide </span>{<span style="color: #ff0000;">
0% {
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
10%, 25% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
}<span style="color: #800000;">
35%, 50% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
}<span style="color: #800000;">
60%, 75% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
}<span style="color: #800000;">
85%, 100% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
}
@-moz-keyframes slide </span>{<span style="color: #ff0000;">
0% {
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
10%, 25% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
}<span style="color: #800000;">
35%, 50% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
}<span style="color: #800000;">
60%, 75% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
}<span style="color: #800000;">
85%, 100% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
}
@-o-keyframes slide </span>{<span style="color: #ff0000;">
0% {
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
10%, 25% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
}<span style="color: #800000;">
35%, 50% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
}<span style="color: #800000;">
60%, 75% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
}<span style="color: #800000;">
85%, 100% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
}
@keyframes slide </span>{<span style="color: #ff0000;">
0% {
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
10%, 25% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
}<span style="color: #800000;">
35%, 50% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
}<span style="color: #800000;">
60%, 75% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
}<span style="color: #800000;">
85%, 100% </span>{<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
}<span style="color: #800000;">
}
.slide-box </span>{<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> url(http://sandbox.runjs.cn/uploads/rs/376/uazzmdfd/bg.png) 0 0 no-repeat</span>;<span style="color: #ff0000;">
-webkit-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
-o-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;
}<span style="color: #800000;">
</style></span>animation 属性是一个简写属性，JavaScript 语法： object.style.animation=" slide 8s linear infinite"，其参数如下：
立即学习“前端免费学习笔记（深入）”；
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction |
规定是否应该轮流反向播放动画。 |
让图片在8秒内进行位移，每次向左移动600px，最后回到原点，div宽600px，刚好容下一个图，这样就构成了轮播效果。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
164
