HTML5動態照片墻是一種非常炫酷的網頁特效，可以為網站增添許多藝術感和視覺沖擊力。下面是一段HTML5動態照片墻代碼樣例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5動態照片墻代碼樣例</title>
<style type="text/css">
/*清除默認樣式*/
* {
margin: 0;
padding: 0;
}
/*設置照片墻容器樣式*/
#photowall {
position: relative;
width: 800px;
height: 600px;
margin: 20px auto;
}
/*設置照片樣式*/
.photo {
position: absolute;
width: 160px;
height: 120px;
padding: 5px;
border: 1px solid #fff;
box-shadow: 0 0 5px #000;
opacity: 0.9;
transition: all 1s ease;
}
.photo:hover {
opacity: 1;
transform: scale(1.2);
z-index: 1;
}
/*設置不同照片的位置*/
.photo:nth-child(1) {
top: 0;
left: 0;
}
.photo:nth-child(2) {
top: 0;
right: 0;
}
.photo:nth-child(3) {
bottom: 0;
left: 0;
}
.photo:nth-child(4) {
bottom: 0;
right: 0;
}
.photo:nth-child(5) {
top: 30%;
left: 20%;
}
.photo:nth-child(6) {
top: 30%;
right: 20%;
}
.photo:nth-child(7) {
bottom: 30%;
left: 20%;
}
.photo:nth-child(8) {
bottom: 30%;
right: 20%;
}
/*設置照片背景圖片*/
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id="photowall">
<div class="photo"><img src="photo1.jpg" alt="photo1"></div>
<div class="photo"><img src="photo2.jpg" alt="photo2"></div>
<div class="photo"><img src="photo3.jpg" alt="photo3"></div>
<div class="photo"><img src="photo4.jpg" alt="photo4"></div>
<div class="photo"><img src="photo5.jpg" alt="photo5"></div>
<div class="photo"><img src="photo6.jpg" alt="photo6"></div>
<div class="photo"><img src="photo7.jpg" alt="photo7"></div>
<div class="photo"><img src="photo8.jpg" alt="photo8"></div>
</div>
</body>
</html>通過這段HTML5動態照片墻代碼樣例，我們可以看到HTML5和CSS3的優秀特性，在原有的HTML和CSS的基礎上，可以實現更高級和更具互動性的網頁特效，提高了網站的視覺效果和用戶體驗。