如何用纯 CSS 为你的情人节创建一颗跳动的心

每年的 2 月 14 日，许多人都会与他们特别的“情人”交换卡片、糖果、礼物或鲜花。我们称之为情人节的浪漫之日是以一位基督教殉道者的名字命名的，其历史可以追溯到公元 5 世纪，但起源于罗马节日牧神节。

好的，到目前为止一切顺利。但是程序员可以为他们的情人做些什么呢？

我的答案是：使用 CSS 并发挥创意！

我真的很喜欢CSS。它不是一种真正复杂的语言（大多数时候它甚至不被认为是一种编程语言）。但是通过一些几何、数学和一些基本的 CSS 规则，您可以将您的浏览器变成您的创意画布！

让我们开始吧。你会如何用纯几何学创造一颗心？

你只需要一个正方形和两个圆圈。

::after和 ::before伪元素，我们可以用单个元素绘制它 。说到伪元素， ::after是一种伪元素，它允许您将内容从 CSS 插入页面（无需在 HTML 中）。 ::before完全一样，只是它在 HTML 中的任何其他内容之前而不是之后插入内容。

对于这两个伪元素，最终结果实际上并不在 DOM 中，但它会出现在页面上，就好像它会在页面上一样。

看看代码：

.heart {
  background-color: red;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

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

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

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

heart您可以很容易地注意到，我们通过使用主类和两个带有 ::before和 ::after伪元素的圆圈来定义正方形及其定位。圆圈实际上只是两个边界半径减半的正方形。

但是没有跳动的心脏是什么？

让我们创造一个脉冲。这里我们将使用**@keyframes** 规则。@keyframesCSS at 规则用于定义一个 CSS 动画循环的行为。

当我们使用关键帧规则时，我们可以将时间段划分为更小的部分，并通过将其拆分为多个步骤来创建转换/动画（每个步骤对应于时间段完成的百分比）。

因此，让我们创建心跳。我们的心跳动画包括 3 个步骤：

@keyframes heartbeat {
  0% {
    transform: scale( 1 );    
  }
  20% {
    transform: scale( 1.25 ) 
      translateX(5%) 
      translateY(5%);
  } 
  40% {
    transform: scale( 1.5 ) 
      translateX(9%) 
      translateY(10%);
  }
}

1. 在0%这段时间里，我们从没有转变开始。
2. 在20%这段时间里，我们将形状缩放到其初始大小的 125%。
3. 在40%这段时间里，我们将形状缩放到其初始大小的 150%。

在剩下的 60% 的时间里，我们留出时间让心脏恢复到初始状态。

最后我们必须将动画分配给我们的心脏。

.heart {
  animation: heartbeat 1s infinite; // our heart has infinite heartbeat :)
  ...
}

将动画分配给我们的心脏。

就是这样！

我们有一颗永远跳动的心。
或者也许只要你自己的爱还在……

最后，祝你情人节快乐！