css 怎么做图片滚动

在网页设计中，图片滚动是一种常见的效果，可以吸引用户的注意力，增加页面的视觉效果，CSS可以实现图片滚动的效果，下面介绍两种方法：

1. 使用CSS动画

/* HTML代码 */div class="scroll">
        div class="images">
            img src="image1.jpg" alt="image1" />
            img src="image2.jpg" alt="image2" />
            img src="image3.jpg" alt="image3" />
        /div>
    /div>
/* CSS代码 */.scroll {
        overflow: hidden;
        width: 500px;
        height: 300px;
        position: relative;
}
.images {
        width: 1500px;
     /*三张图片的宽度之和*/    height: 300px;
        position: absolute;
        -webkit-animation: scroll 5s linear infinite;
     /*动画名称，动画时间，动画类型，动画次数*/    animation: scroll 5s linear infinite;
}
@-webkit-keyframes scroll {
    0% {
            left: 0;
    }
    100% {
            left: -1000px;
 /*每次向左移动一个图片的宽度，即500px*/    }
}
@keyframes scroll {
    0% {
            left: 0;
    }
    100% {
            left: -1000px;
 /*每次向左移动一个图片的宽度，即500px*/    }
}
    

2. 使用CSS属性

/* HTML代码 */div class="scroll">
        ul class="images">
            li>
    img src="image1.jpg" alt="image1" />
    /li>
            li>
    img src="image2.jpg" alt="image2" />
    /li>
            li>
    img src="image3.jpg" alt="image3" />
    /li>
        /ul>
    /div>
/* CSS代码 */.scroll {
        overflow: hidden;
        width: 500px;
        height: 300px;
}
.images {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 1500px;
     /*三张图片的宽度之和*/    height: 300px;
        position: relative;
        left: 0;
        -webkit-transition: left 5s;
     /*动画名称，动画时间*/    transition: left 5s;
}
.images:hover {
        left: -1000px;
 /*每次向左移动一个图片的宽度，即500px*/}
    

两种方法都可以实现图片滚动的效果，可以根据具体的需求选择合适的方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！