html5炫酷照片墙代码
时间: 2023-12-26 15:24:53 浏览: 89
HTML5炫酷照片墙代码主要使用了CSS3的transition、transform和box-shadow技术。以下是一个简单的HTML5炫酷照片墙代码的示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5炫酷照片墙</title>
<style>
.photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 20px;
max-width: 1200px;
}
.photo-wall img {
width: 200px;
height: 200px;
margin: 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out;
transform: scale(1);
}
.photo-wall img:hover {
transform: scale(1.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="photo-wall">
<img src="img/1.jpg" alt="照片1">
<img src="img/2.jpg" alt="照片2">
<img src="img/3.jpg" alt="照片3">
<img src="img/4.jpg" alt="照片4">
<img src="img/5.jpg" alt="照片5">
<img src="img/6.jpg" alt="照片6">
<img src="img/7.jpg" alt="照片7">
<img src="img/8.jpg" alt="照片8">
<img src="img/9.jpg" alt="照片9">
<img src="img/10.jpg" alt="照片10">
<img src="img/11.jpg" alt="照片11">
<img src="img/12.jpg" alt="照片12">
<img src="img/13.jpg" alt="照片13">
<img src="img/14.jpg" alt="照片14">
<img src="img/15.jpg" alt="照片15">
<img src="img/16.jpg" alt="照片16">
<img src="img/17.jpg" alt="照片17">
<img src="img/18.jpg" alt="照片18">
<img src="img/19.jpg" alt="照片19">
<img src="img/20.jpg" alt="照片20">
<img src="img/21.jpg" alt="照片21">
<img src="img/22.jpg" alt="照片22">
<img src="img/23.jpg" alt="照片23">
<img src="img/24.jpg" alt="照片24">
<img src="img/25.jpg" alt="照片25">
<img src="img/26.jpg" alt="照片26">
<img src="img/27.jpg" alt="照片27">
<img src="img/28.jpg" alt="照片28">
<img src="img/29.jpg" alt="照片29">
<img src="img/30.jpg" alt="照片30">
</div>
</body>
</html>
```
在这个示例中,我们使用了一个名为“photo-wall”的div元素来包含所有的照片。我们使用了CSS3的flexbox布局来使照片在页面中居中显示,并使用了transition、transform和box-shadow技术来实现照片的缩放和阴影效果。当鼠标悬停在照片上时,照片会放大并显示更明显的阴影效果。
阅读全文