如何使用CSS创建心跳动画-css教程-PHP中文网

如何使用CSS创建心跳动画

霞舞

发布： 2025-02-16 10:44:19

原创

1321人浏览过

想让你的网站动起来吗？试试纯css打造的跳动爱心动画！无需javascript，无需库，只需css代码就能实现。

步骤一：创建爱心形状

首先，我们用CSS的::before和::after伪元素创建一个爱心：

<code class="html"><div class="heart"></div></code>

登录后复制

<code class="css">.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(-45deg);
  margin: 50px auto;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  left: 50px;
  top: 0;
}</code>

登录后复制

大功告成！一个爱心形状出现了！接下来，让它跳动起来！

步骤二：添加跳动动画

立即学习“前端免费学习笔记（深入）”；

我们使用@keyframes规则来实现爱心的缩放动画：

<code class="css">@keyframes heartbeat {
  0%, 100% { transform: scale(1) rotate(-45deg); }
  50% { transform: scale(1.2) rotate(-45deg); }
}

.heart {
  animation: heartbeat 1s infinite;
}</code>

登录后复制

现在爱心开始有节奏地跳动了！

步骤三：微调动画效果

阿里妈妈·创意中心

阿里妈妈营销创意中心

查看详情

为了使动画更自然，我们调整一下动画的节奏：

<code class="css">@keyframes heartbeat {
  0%, 100% { transform: scale(1) rotate(-45deg); }
  30% { transform: scale(1.2) rotate(-45deg); }
  60% { transform: scale(1) rotate(-45deg); }
  80% { transform: scale(1.1) rotate(-45deg); }
}

.heart {
  animation: heartbeat 1.2s infinite ease-in-out;
}</code>

登录后复制

现在动画更加流畅，更像真实的心跳了。

完整代码:

<code class="html"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heartbeat Animation</title>
  <style>
    .heart {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;
      transform: rotate(-45deg);
      margin: 50px auto;
      animation: heartbeat 1.2s infinite ease-in-out;
    }

    .heart::before,
    .heart::after {
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 50%;
    }

    .heart::before {
      top: -50px;
      left: 0;
    }

    .heart::after {
      left: 50px;
      top: 0;
    }

    @keyframes heartbeat {
      0%, 100% { transform: scale(1) rotate(-45deg); }
      30% { transform: scale(1.2) rotate(-45deg); }
      60% { transform: scale(1) rotate(-45deg); }
      80% { transform: scale(1.1) rotate(-45deg); }
    }
  </style>
</head>
<body>
  <div class="heart"></div>
</body>
</html></code>

登录后复制

动画效果展示：

如何使用CSS创建心跳动画