HTML中的愛心代碼，可以讓網頁更加生動有趣。下面我們來學習一些
動態的愛心代碼。
<!DOCTYPE html>
<html>
<head>
<title>動態愛心</title>
<script>
//定義一個函數，實現愛心的動態效果
function HeartBeat() {
//獲取屏幕的寬和高
var MaxWidth = document.documentElement.clientWidth-100;
var MaxHeight = document.documentElement.clientHeight-100;
//生成隨機數，控制愛心的位置和大小
var X = Math.ceil(Math.random() * MaxWidth);
var Y = Math.ceil(Math.random() * MaxHeight);
var Size = Math.ceil(Math.random() * 10) + 10;
//創建一個div，即愛心
var heart = document.createElement("div");
//設置愛心的樣式
heart.id = "heart";
heart.style.left = X + "px";
heart.style.top = Y + "px";
heart.style.width = Size + "px";
heart.style.height = Size + "px";
//將愛心加入到頁面中
document.body.appendChild(heart);
//設置一段時間后刪除愛心
setTimeout(function() {
heart.remove();
}, 5000);
}
//定時器，每200毫秒執行一次HeartBeat函數
setInterval(HeartBeat, 200);
</script>
</head>
<body>
</body>
</html>以上代碼中，我們利用了JavaScript的定時器和DOM操作，達到了愛心不斷泛動的動態效果。
同時，我們也可以利用CSS3的動畫屬性，制作出更加炫酷精美的愛心效果，如下代碼所示：
<!DOCTYPE html>
<html>
<head>
<title>動態愛心</title>
<style>
/*定義一個動畫，使愛心持續旋轉*/
@keyframes rotate{
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
/*定義一個容器，用來承載兩個愛心*/
.heart-wrap{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
animation: rotate 3s infinite linear;
}
/*定義兩個愛心*/
.heart {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF69B4;
transform: rotate(-45deg);
border-radius: 50% 50% 0 50%;
animation: beat 1s infinite alternate;
}
.heart.right{
left: 50px;
transform: rotate(45deg);
border-radius: 50% 50% 50% 0;
}
/*定義一個動畫，控制愛心的跳動*/
@keyframes beat{
0% {
transform: scale(0.8); /*縮小*/
}
100% {
transform: scale(1); /*恢復原始大小*/
}
}
</style>
</head>
<body>
<div class="heart-wrap">
<div class="heart"></div>
<div class="heart right"></div>
</div>
</body>
</html>以上代碼會呈現出兩個不斷旋轉跳動的粉色愛心，效果十分炫酷。
通過對動態愛心代碼的學習，我們可以靈活運用HTML、CSS和JavaScript這些前端技術，不斷創造出更多有創意、有趣的網頁效果。