用CSS实现图片点击翻页
时间: 2023-05-17 15:06:43 浏览: 116
可以使用CSS3中的transform属性来实现图片的翻页效果。具体实现方法如下:
HTML代码:
```
<div class="page">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
</div>
```
CSS代码:
```
.page {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.page img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.page img:not(:first-child) {
transform: translateX(100%);
}
.page:hover img:not(:hover) {
transform: translateX(-100%);
}
```
解释:
1. 将包含图片的div设置为相对定位,宽度和高度为固定值,overflow属性设置为hidden,以便隐藏超出div范围的图片。
2. 将每张图片设置为绝对定位,宽度和高度为100%,并且使用CSS3的transition属性设置过渡效果。
3. 将除第一张图片外的其它图片向右平移100%的距离,使它们隐藏在div的右侧。
4. 当鼠标悬停在div上时,将除当前悬停的图片外的其它图片向左平移100%的距离,使它们从右侧滑入div中。