溫馨提示×

HTML愛心跳動代碼怎么寫

小億
905
2024-01-19 10:52:54
欄目: 編程語言

以下是一個簡單的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規(guī)則來定義一個名為heartbeat的動畫。動畫通過不同的百分比來實現(xiàn)愛心的放大和縮小效果。然后我們通過.heart選擇器將動畫應用到一個span元素上，并為其設置紅色顏色。

2 踩