HTMLでハートの動きを作るコードはどう書ける？

2年 ago
綾乃, 一希
1 minute

以下は簡単な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>

上記コードでは、heartbeatというアニメーションを定義するためにCSSの@keyframesルールを使用しました。このアニメーションは、異なるパーセンテージを使用してハートの拡大縮小効果を実現しています。その後、.heartセレクタを使用して、そのアニメーションをspan要素に適用し、赤色の色を設定しました。

bannerAds