css 走马灯效果 |css中渐变

HTML 代码：
<div class="carousel-container">
<div class="carousel-img">
<img src="slide1.jpg">
<img src="slide2.jpg">
<img src="slide3.jpg">
</div>
</div>
CSS 代码：
.carousel-container {
width: 100%;
height: 400px;
overflow: hidden;
}
.carousel-img {
width: 300%;
-webkit-animation: carousel 10s infinite linear;
}
.carousel-img img {
width: 33.33%;
float: left;
}
@-webkit-keyframes carousel {
0% { margin-left: 0; }
100% { margin-left: -200%; }
}

在上面的代码中，大家首先创建了一个 div 容器，用来承载图片。接着在容器内部创建了多个 img 元素，这些元素即为大家需要展示的图片。需要注意的是，展示的图片数量必须是 3 的倍数，这样才能保证每个图片都能够平均分布在容器中。

设置 CSS 样式时，大家将容器的宽度设置为 100%，高度设置为 400px，这样就可以让容器占据整个屏幕。然后大家将容器的 overflow 属性设置为 hidden，这样就可以去掉默认的滚动条。

接着大家针对图片容器设置了宽度为 300%，这样就能够将所有的图片平均分配到容器内。接着大家使用 -webkit-animation 属性来设定动画效果，其中的 carousel 参数表示大家要使用的动画名称，10s 表示动画的执行时间，infinite 表示动画将无限循环，linear 表示动画以线性的方式进行。最后大家使用 @-webkit-keyframes 来定义动画的具体样式，关键帧选择器 0% 和 100% 表示动画的起始和结束状态，大家设置 margin-left 属性来使图片向左滚动。

通过以上的步骤，大家就可以轻松实现一个简单的 CSS 走马灯效果。当然大家还可以根据需要进行适当的调整，在实际应用中达到更好的效果。