下面是一個簡單的HTML跳動愛心代碼示例：
<!DOCTYPE html><html>
<head>
<title>跳動愛心</title>
<style>
.heart {
position: relative;
width: 100px;
height: 100px;
transform: rotate(45deg);
animation: beat 1.2s infinite ease-in-out;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #e74c3c;
}
.heart:before {
left: -50px;
}
.heart:after {
left: 50px;
}
@keyframes beat {
0% {
transform: scale(1) rotate(45deg);
}
50% {
transform: scale(0.6) rotate(45deg);
}
100% {
transform: scale(1) rotate(45deg);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
該代碼使用CSS動畫來實現愛心的跳動效果。使用.heart類選擇器定義了愛心元素的樣式，包括尺寸、顏色和旋轉角度等。
通過:before和:after偽元素創建兩個半圓形狀構成愛心的兩側。使用@keyframes關鍵字定義了名為beat的動畫，控制愛心的尺寸和旋轉。
最后，在HTML中創建了一個具有.heart類的<div>元素，用于展示跳動的愛心效果。你可以根據需要調整樣式和動畫參數來實現更多個性化的效果。
