html3图片链接翻页效果
时间: 2023-07-28 07:27:53 浏览: 43
您可以使用JavaScript和CSS来实现HTML图片链接的翻页效果。以下是一个简单的实现示例:
HTML代码:
```
<div class="gallery">
<a href="image1.jpg"><img src="thumb1.jpg"></a>
<a href="image2.jpg"><img src="thumb2.jpg"></a>
<a href="image3.jpg"><img src="thumb3.jpg"></a>
<a href="image4.jpg"><img src="thumb4.jpg"></a>
</div>
```
CSS代码:
```
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery a {
margin: 10px;
position: relative;
overflow: hidden;
}
.gallery img {
max-width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.gallery a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery a:hover img {
transform: scale(1.1);
}
.gallery a:hover::before {
opacity: 1;
}
```
这段代码将会在鼠标悬停于图片链接上时,使其放大并显示半透明的黑色遮罩。您可以根据自己的需求对CSS进行调整。