HTML5是一種標記語言，它可以用來創建網頁并實現各種交互效果，比如心形照片墻。下面是一個HTML5實現心形照片墻的代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>心形照片墻</title>
<style>
.photo-wall {
width: 800px;
height: 600px;
margin: 0 auto;
}
.photo {
width: 200px;
height: 200px;
position: relative;
float: left;
margin: 30px;
overflow: hidden;
}
.photo img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.9;
transition: opacity 0.3s ease-out;
}
.photo:hover img {
opacity: 1;
}
.heart {
position: absolute;
top: 40px;
left: 60px;
width: 80px;
height: 80px;
transform: rotate(-45deg);
border-radius: 40px;
border-top: 8px solid #FC427B;
border-right: 8px solid #FC427B;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background: #FC427B;
border-radius: 40px;
}
.heart:before {
top: -40px;
left: 0;
width: 80px;
height: 80px;
}
.heart:after {
top: 0;
left: 40px;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="photo-wall">
<div class="photo">
<div class="heart"></div>
<img src="photo1.jpg" alt="photo1">
</div>
<div class="photo">
<div class="heart"></div>
<img src="photo2.jpg" alt="photo2">
</div>
<div class="photo">
<div class="heart"></div>
<img src="photo3.jpg" alt="photo3">
</div>
<div class="photo">
<div class="heart"></div>
<img src="photo4.jpg" alt="photo4">
</div>
<div class="photo">
<div class="heart"></div>
<img src="photo5.jpg" alt="photo5">
</div>
<div class="photo">
<div class="heart"></div>
<img src="photo6.jpg" alt="photo6">
</div>
</div>
</body>
</html>在這個示例中，我們先創建了一個.photo-wall的類作為整個照片墻的容器，指定了它的寬度、高度和居中對齊。然后，我們創建了一個.photo的類作為每張照片的容器，指定了它的寬度、高度、相對定位、浮動、邊距和溢出隱藏。在.photo中，我們嵌套了一個.heart的類作為心形圖案的容器，并添加了:before和:after偽元素來實現完整的心形。最后，我們在.photo中添加了一張圖片，并設置透明度變化實現了鼠標懸停時的效果。
這是一個簡單的HTML5實現心形照片墻的代碼示例，您可以根據自己的需要進行修改和擴展。上一篇html5介紹圖片代碼
下一篇顯示圖片邊框 css