css3滑动更换图片 |div css动态模板

html, body {
height: 100%;
margin: 0;
padding:0;
}
.slider-container {
height: 100%;
width: 100%;
overflow: hidden;
}
.slider {
height: 100%;
width: 300%;
display: flex;
flex-wrap: nowrap;
transform-origin: 0 0;
transition: transform 1s ease;
}
.slider img {
height: 100%;
width: 33.33%;
}
/* 鼠标滑动时触发动画效果 */
.slider-container:hover .slider {
transform: translateX(-100%);
}

以上是一个基本的CSS3滑动更换图片的实现。大家使用一个包含多张图片的容器，并设置其宽度为图片宽度的三倍，这样就可以在滑动过程中切换图片。大家还使用了Flexbox布局，来控制图片的宽度和高度，使得图片可以自适应容器大小。通过鼠标滑动触发动画效果，就可以实现图片的滑动更换了。

总的来说，使用CSS3来制作滑动更换图片的效果是非常简单的，同时也具有很好的交互性。大家可以根据自己的需求进行相应的修改，比如图片数量、宽度、动画时间等，来适应不同的设计需求。相信这个效果会给网站带来一些新的活力，帮助大家实现更好的用户体验。