首页 > 文章 > 前端

如何使用CSS创建心跳动画

时间：2025-02-15 15:34:23 304浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《如何使用CSS创建心跳动画》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

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

步骤一：创建爱心形状

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

.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;
}

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

步骤二：添加跳动动画

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

@keyframes heartbeat {
  0%, 100% { transform: scale(1) rotate(-45deg); }
  50% { transform: scale(1.2) rotate(-45deg); }
}

.heart {
  animation: heartbeat 1s infinite;
}

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

步骤三：微调动画效果

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

@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;
}

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

完整代码:

<!DOCTYPE html>


  Heartbeat Animation

动画效果展示：

如何使用CSS创建心跳动画

总结:

CSS的强大之处在于，即使是简单的动画，也能轻松实现，无需依赖JavaScript。你可以根据自己的喜好调整颜色、大小和动画速度，创造出独一无二的爱心动画，应用于你的网站加载页面、情人节主题页面等。快来试试吧！ ❤️

今天关于《如何使用CSS创建心跳动画》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！