css 图片左右轮播代码 |css 设置图片属性设置颜色

.slider{
overflow: hidden; /* 隐藏溢出部分 */
white-space: nowrap; /* 不换行 */
}
.slide{
display: inline-block; /* 在同一行内排列 */
margin-right: 20px; /* 图片之间的间距 */
vertical-align: middle; /* 图片垂直居中 */
transition: transform 0.5s ease; /* 过渡动画效果 */
}
.slider:hover .slide{
transform: translateX(-100px); /* 鼠标悬停时滑动动画效果 */
}
.slider:hover .slide:last-child{
margin-right: 0; /* 最后一张图片无间距 */
}

上述代码通过设置overflow:hidden隐藏多余的部分、white-space:nowrap不换行、display:inline-block同行，并使用margin-right达到图片间距，还有过渡动画效果，使得图片切换平滑美观。同时，使用:hover悬停效果，实现左右滑动。需要注意的是，需将最后一张图片的margin-right:0消除间距。