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

想让你的网站动起来吗？试试纯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>

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

步骤三：微调动画效果

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

<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">


  <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>
<div class="heart"></div>

</code>

动画效果展示：

如何使用CSS创建心跳动画