[分享]css3图片静态滚动代码

 前端开发中，图片静态滚动效果是常见的页面动态展示方式之一。在CSS3中，我们可以使用transform和transition属性来实现图片的静态滚动效果。 首先，我们需要在HTML文档中添加一个包含...

 前端开发中，图片静态滚动效果是常见的页面动态展示方式之一。在CSS3中，我们可以使用transform和transition属性来实现图片的静态滚动效果。
首先，我们需要在HTML文档中添加一个包含图片的div元素。该div元素需要设置宽度、高度以及溢出属性。代码如下：

 <div class="image-container">
<br>
    <img src="image1.jpg">
<br>
    <img src="image2.jpg">
<br>
    <img src="image3.jpg">
<br>
</div>
<br>
.image-container {
<br>
    width: 100%;
<br>
    height: 400px;
<br>
    overflow: hidden;
<br>
}
<br>
.image-container img {
<br>
    width: 100%;
<br>
} 

然后，在CSS3中使用transform: translateX()属性来设置图片的水平偏移量，并使用transition属性来设置动画效果。在这个例子中，我们将使用一个变量来计算偏移量。

 .image-container {
<br>
    display: flex;
<br>
    width: 100%;
<br>
    height: 400px;
<br>
    overflow: hidden;
<br>
}
<br>
.image-container img {
<br>
    width: 100%;
<br>
    transition: transform 2s ease;
<br>
}
<br>
/* 声明一个变量 */
<br>
:root {
<br>
  --offset: 0;
<br>
}
<br>
/* 每秒更新变量的值 */
<br>
@keyframes move {
<br>
  100% {
<br>
    --offset: calc(var(--offset) - 100%);
<br>
  }
<br>
}
<br>
/* 将偏移量应用到每个图片 */
<br>
.image-container img:nth-child(1) {
<br>
  transform: translateX(var(--offset));
<br>
}
<br>
.image-container img:nth-child(2) {
<br>
  transform: translateX(calc(var(--offset) + 100%));
<br>
}
<br>
.image-container img:nth-child(3) {
<br>
  transform: translateX(calc(var(--offset) + 200%));
<br>
}
<br>
/* 启动动画和无限循环 */
<br>
.image-container {
<br>
  animation: move 2s infinite;
<br>
} 

在这段代码中，我们使用了display: flex属性来设置容器为弹性布局，让子元素容易对齐。同时，我们使用了一个名为move的动画，它会每秒更新一个变量(--offset)的值。在每个图片元素的transform属性中，我们使用calc函数来计算偏移量，从而实现向左滚动的效果。
最后，我们将动画应用到容器上，并设置为infinite无限循环。
这是一个简单的CSS3图片静态滚动效果的示例。您可以根据自己的需求对样式和动画进行修改和扩展。