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

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

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

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

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

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

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

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

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

看看代码：

.heart {
   
  background-color: red;
  display: inline-block;
  height: 50px;