如何用 HTML 和 CSS 实现跳动红心_前端跳动的心动画

作者：凡人多烦事01 | 2024-05-21 16:08:00

踩

前端跳动的心动画

HTML 结构

首先，我们需要创建一个空的 HTML 文件，并在 <head> 标签中添加 <title> 标签以及一个链接到 CSS 文件的 <link> 标签。我们将使用一个 div 元素来表示红心，给它一个类名 .heart，并将其放在 <body> 标签中。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Jumping Heart</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="heart"></div>
  </body>
</html>

CSS 样式

接下来，我们需要添加 CSS 样式来定义红心。我们将使用 ::before 和 ::after 伪元素来创建两个半圆，然后通过旋转和定位将它们组合成一个心形。我们还将使用 animation 属性来制作一个名为 jump 的动画，使红心上下跳动。


/* 定义心的样式 */
.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
 
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
 
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
 
/* 定义跳动的动画 */
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
 
/* 应用动画 */
.heart {
  animation-name: jump;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

在上面的代码中，我们定义了一个名为 .heart 的类，将其定位为相对位置，并为其设置了一个宽度和高度。接下来，我们使用 ::before 和 ::after 伪元素创建了两个半圆，并通过旋转和定位将其组合成了一个心形。

我们还定义了一个名为 jump 的动画，并将其应用到了 .heart

类上。这个动画由三个关键帧组成，分别在 0%、50% 和 100% 处定义了红心的位置。我们使用 translateY() 函数来将红心上下移动，其中负数表示向上移动，正数表示向下移动。

最后，我们通过将动画名称、持续时间、缓动函数和迭代次数设置为相应的值，将动画应用到了 .heart 类上。

将上面的 HTML 和 CSS 代码组合在一起，即可得到一个跳动的红心。您可以将代码复制到您的文本编辑器中，并保存为一个名为 index.html 和 style.css 的文件。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/603463