css图片向上间歇式滚动 |css wap尺寸

html {
background-color: #f5f5f5;
font-family: Lato;
}
.container {
width: 600px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
position: relative;
}
.container img {
width: 100%;
height: auto;
position: absolute;
left: 0;
}
.container img:nth-child(1) {
animation: slide 8s infinite;
}
.container img:nth-child(2) {
animation: slide 8s infinite;
animation-delay: 2s;
}
.container img:nth-child(3) {
animation: slide 8s infinite;
animation-delay: 4s;
}
@keyframes slide {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-100%);
}
50% {
transform: translateY(-100%);
}
75% {
transform: translateY(-200%);
}
100% {
transform: translateY(-200%);
}
}

首先，大家需要在HTML文件中创建一个容器，将需要展示的图片放在里面。然后，在CSS文件中，设置容器的宽度、内边距、外边距、溢出隐藏等属性，并且将图片样式设置为绝对定位，这样才能实现左边距为0的效果。

接着，大家通过nth-child选择器，为每个图片单独添加动画效果和动画延迟时间。此处推荐的动画方式是深入浅出的单/double slide效果。大家通过keyframes为动画设置时间和变化规则。

最后，CSS图片向上间歇式滚动效果就完成了。在这种效果下，图片呈现出优美的向上滚动效果，并且具有一定的停顿时间，更好地吸引了观众的注意力。