[分享]css3图片定时向上滚动

CSS3是一种强大的样式语言，可用于样式化HTML文档中的元素。其中，图片定时向上滚动是一种很实用的特效，可以让网站更生动有趣。 .scroll{ width:400px; height:200px;...

CSS3是一种强大的样式语言，可用于样式化HTML文档中的元素。其中，图片定时向上滚动是一种很实用的特效，可以让网站更生动有趣。

 <style type="text/css">
        .scroll{
            width:400px;
            height:200px;
            overflow:hidden;
            margin:0 auto;
            position:relative;
        }
        
        .scroll img{
            position:absolute;
            left:0;
            top:0;
        }
        
        @keyframes scroll{
            from{
                top:0;
            }
            to{
                top:-200px;
            }
        }
        
        .scroll img:nth-child(1){
            animation:scroll 5s ease-in-out infinite;
        }
        .scroll img:nth-child(2){
            animation:scroll 5s ease-in-out 1s infinite;
        }
        .scroll img:nth-child(3){
            animation:scroll 5s ease-in-out 2s infinite;
        }
    </style> 

首先，我们需要创建一个容器来盛放需要滚动的图片。在该容器上设置宽高，并将溢出部分隐藏，同时设置相对定位，以后我们将使用绝对定位的方式来控制图片的滚动。

接下来，我们需要给每张滚动图片设置一个相对定位，并将它们放在容器的左上角。这样就可以通过动画来将图片向上滚动。

通过CSS3的@keyframes属性，我们创建了一个名为scroll的动画。其中，从top:0到top:-200px的动画效果在5秒内完成，并采用ease-in-out效果曲线，并且一个循环就可以让图片不断向上滚动。

在HTML文件中，我们可以在容器中添加多张图片，并使用nth-child伪类来为每张图片设置不同的动画延迟时间，实现图片的错落滚动效果。

 <div class="scroll">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
    </div> 

最后，嵌入以上CSS3样式到HTML文件中，即可看到一组图片在容器中不断滚动的效果。