當我們翻閱網站相冊時，會不會發現一些充滿創意，充滿驚喜的框框呢？今天就給大家分享一款HTML愛心相冊代碼，讓你的網站也融入浪漫的氣息哦~
<div class="heart-container"> <ul class="heart-list"> <li class="heart-item"><img src="image/1.jpg"></li> <li class="heart-item"><img src="image/2.jpg"></li> <li class="heart-item"><img src="image/3.jpg"></li> <li class="heart-item"><img src="image/4.jpg"></li> <li class="heart-item"><img src="image/5.jpg"></li> </ul> </div>
上面的代碼中，我們使用了
、
- 、
- 和
標簽，分別表示相冊容器、列表、列表項和圖片元素。我們還設置了class屬性，以控制樣式。此外，我們還需要通過CSS樣式表對代碼進行修飾，讓效果更佳。
.heart-container { position: relative; width: 100%; } .heart-list { list-style: none; overflow: hidden; margin: 0; padding: 0; } .heart-item { float: left; width: 20%; padding: 0.4rem; box-sizing: border-box; text-align: center; position: relative; transition: all 0.3s ease-in-out; } .heart-item img { max-width: 100%; height: auto; border-radius: 5px; box-shadow: 0px 0px 5px #ccc; } .heart-item::before { content: '"\2665"'; display: block; font-size: 5rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 2; color: #d63031; transition: all 0.3s linear; } .heart-item:hover::before { opacity: 1; } .heart-item::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; background-color: #fff; width: 120%; height: 120%; opacity: 0; transition: all 0.3s linear; } .heart-item:hover::after { opacity: 1; }上面的CSS樣式表中，我們定義了相冊容器和圖片列表的基本樣式。并且使用偽元素:before和:after實現出現紅心和旋轉框框的動畫效果。這些樣式的控制，加上HTML代碼，就可以實現震撼的HTML愛心相冊效果啦！
最后，讓我們一起來放眼浪漫的愛心相冊，感受愛情的甜蜜呢~