css写一个四张图片鼠标悬停左右滑动效果
时间: 2023-11-14 15:16:45 浏览: 224
可以使用以下的 HTML 和 CSS 代码实现:
HTML 代码:
```html
<div class="image-slider">
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
</div>
```
CSS 代码:
```css
.image-slider {
width: 100%;
overflow-x: hidden;
}
.image-container {
display: flex;
flex-wrap: nowrap;
transition: transform 0.3s ease-in-out;
}
.image-container img {
width: calc(100% / 4);
height: auto;
object-fit: cover;
cursor: pointer;
}
.image-container img:hover {
transform: scale(1.1);
}
.image-slider:hover .image-container {
transform: translateX(-10%);
}
.image-slider:hover .image-container img:first-child {
transform: translateX(10%);
}
.image-slider:hover .image-container img:last-child {
transform: translateX(-30%);
}
```
这段代码会在页面上显示一个带有四张图片的容器,当鼠标悬停在图片上时,图片会放大,并且整个容器会向左移动,同时第一张图片向右移动,最后一张图片向左移动。这个效果可以通过调整 CSS 中的数值来达到想要的效果。
阅读全文