css 左右滚动效果代码 |css滑动图片效果

.container {
position: relative;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-behavior: smooth; 
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background-color: #ccc;
margin-right: 10px;
vertical-align: top;
}

上面的代码中，大家先定义了一个父元素.container，使用了overflow-x属性，将横向滚动条设置为自动，同时设置了white-space属性，将元素显示为一行。大家还添加了scroll-behavior属性，让滚动更平滑。

然后，在.container中添加子元素.item，大家将其定义为内联块元素，使用了margin-right属性设置元素之间的间隔。这里大家设置所有的.item元素宽度相同，高度也相同，然后添加了背景颜色。

总体来说，CSS左右滚动效果代码还是比较简单的，只要掌握了关键的属性设置，就可以轻松实现这种效果。希望这篇文章对大家有所帮助。