今天我要向大家分享一款非常可愛的 HTML 愛心特效代碼，這個特效是由我自己編寫的，非常簡單易懂，即使是初學者也能輕松上手。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 愛心特效</title>
<style>
.heart {
width: 20px;
height: 20px;
position: relative;
animation: animate 1s ease-in-out infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: red;
border-radius: 50% 50% 0 0;
}
.heart:before {
width: 20px;
height: 20px;
top: -10px;
left: 0;
}
.heart:after {
width: 20px;
height: 20px;
top: 0;
left: 10px;
}
@keyframes animate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<p> My Heart is for <span class="heart"></span> You! </p>
</body>
</html>這個特效由一個 div 容器和兩個偽元素（:before 和 :after）組成，利用 CSS3 的動畫屬性和 transform 縮放屬性制作成了一個跳動的愛心。通過給 span 標簽添加絕對定位，使之在文字中居中展示。
不難看出，這個小小的代碼塊僅有幾十行，但卻能在頁面中呈現出生動活潑的圖形。這便是 HTML 的神奇之處，它可以通過簡單的代碼實現精美的效果，為網站增添無限魅力。
如果你也想嘗試一下這個特效，不妨將它加入到你的網頁中，展示你對某個人或事物的熱愛之情，讓頁面更加溫馨有趣。