如果你正在為了某個特別的人而尋找一種有創意的方式來展現你們的回憶,那么制作一個心形相冊可以是一個不錯的選擇。以下是一個簡單的HTML心形相冊代碼供你參考:
<!DOCTYPE html> <html> <head> <title>我的心形相冊</title> <style> /* 設定相冊容器的樣式 */ .album { width: 600px; height: 500px; margin: 50px auto; position: relative; overflow: hidden; } /* 設定相片的樣式 */ .photo { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; } /* 翻轉相片 */ .photo.flipped { transform: rotateY(180deg) translate(-50%, -50%); } /* 設定左半邊相冊的樣式 */ .half.left { clip-path: polygon(0 0, 50% 50%, 0 100%, 0 50%); } /* 設定右半邊相冊的樣式 */ .half.right { clip-path: polygon(50% 50%, 100% 0, 100% 50%, 50% 100%); } </style> </head> <body> <div class="album"> <div class="half left"> <div class="photo"><img src="image-1.jpg"></div> <div class="photo"><img src="image-2.jpg"></div> </div> <div class="half right"> <div class="photo"><img src="image-3.jpg"></div> <div class="photo"><img src="image-4.jpg"></div> </div> </div> </body> </html>
如上所述,這個代碼將創建一個相冊容器,里面包含四張相片,并按照心形的形狀展示。你可以根據自己的需要替換相片和改變相冊容器的樣式,來制作出你自己的心形相冊。