[分享]css3怎么实现轮番切换

CSS3是一种用于美化网页的技术，它能够实现许多动态效果，比如轮番切换图片。下面是CSS3实现轮番切换图片的代码： / CSS代码 / .wrapper { width: 600px; h...

CSS3是一种用于美化网页的技术，它能够实现许多动态效果，比如轮番切换图片。下面是CSS3实现轮番切换图片的代码：

<div class="wrapper">
    <div class="slider">
        <img src="img1.jpg">
        <img src="img2.jpg">
        <img src="img3.jpg">
    </div>
</div>

/* CSS代码 */
.wrapper {
    width: 600px;
    height: 300px;
    position: relative;
    overflow: hidden;
}
.slider {
    width: 1***px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    animation: slide 9s infinite;
}
.slider img {
    width: 600px;
    height: 300px;
    float: left;
}
@keyframes slide {
    0% {left: 0;}
    33.33% {left: -600px;}
    66.66% {left: -1200px;}
    100% {left: 0;}
} 

以上代码中，div标签中包含一个class为wrapper的外层div和一个class为slider的内层div。wrapper用overflow:hidden属性隐藏slider溢出的部分，实现轮番切换的效果。slider内部是三张图片，每张图片都有自己的宽度和高度，通过float:left属性实现横向排列。

slider的动画效果由CSS3的keyframes实现，动画名称为slide，总时长为9秒，无限循环。0%时，slider的left值为0，即初始状态；33.33%时，slider的left值为-600px，即向左偏移了一张图片的距离，以此类推，最终实现轮番切换的效果。

CSS3实现轮番切换图片的效果有多种方法，以上代码仅供参考。希望本文能够对读者有所帮助。