HTML爱心跳动代码怎么写

lewis 8年前 (2017-03-29) 阅读数 9 #程序编程

文章标签 html

以下是一个简单的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元素上，并为其设置红色颜色。