以下是一個簡單的HTML愛心跳動代碼示例:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes heartbeat {
0% {
transform: scale(1);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.9);
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
.heart {
animation: heartbeat 1s infinite;
color: red;
}
</style>
</head>
<body>
<span class="heart">??</span>
</body>
</html>
在上述代碼中,我們使用了CSS的@keyframes
規則來定義一個名為heartbeat
的動畫。動畫通過不同的百分比來實現愛心的放大和縮小效果。然后我們通過.heart
選擇器將動畫應用到一個span
元素上,并為其設置紅色顏色。