用CSS的transform实现图片点击翻页
时间: 2023-05-20 08:01:32 浏览: 410
18种html5图片分页导航按钮样式动画特效
可以使用CSS的transform属性来实现图片点击翻页效果。具体实现方法可以参考以下代码:
HTML代码:
```
<div class="container">
<div class="page">
<img src="page1.jpg" alt="Page 1">
</div>
<div class="page">
<img src="page2.jpg" alt="Page 2">
</div>
</div>
```
CSS代码:
```
.container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.page:first-child {
transform: translateX(0);
}
.page:last-child {
transform: translateX(-100%);
}
.page.active {
transform: translateX(-100%);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.container:hover .page.active {
transform: translateX(0);
}
.container:hover .page:first-child {
transform: translateX(100%);
}
.container:hover .page:last-child {
transform: translateX(0);
}
```
这段代码实现了一个图片翻页的效果,当鼠标悬停在容器上时,当前显示的图片会向左移动,同时下一张图片会从右侧进入。可以根据需要修改容器的宽度和高度,以及图片的宽度和高度。
阅读全文