css 跳动的心

Each year on February 14th, many people exchange cards, candies, gifts or flowers with their special “valentine”. The day of romance we call Valentine’s Day is named for a Christian martyr and dates back to the 5th century, but has origins in the Roman holiday Lupercalia.

每年2月14日，许多人都用他们特殊的“情人节”来交换卡片，糖果，礼物或鲜花。 我们称之为情人节的浪漫之日以基督教烈士而命名，其历史可以追溯到5世纪，但起源于罗马假日卢佩卡利阿(Lupercalia)。

Ok so far so good. But what can a programmer do for their Valentine?

好的，到目前为止很好。 但是程序员可以为他们的情人做什么？

My answer is: use CSS and be creative!

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

I really love CSS. It’s not a really sophisticated language (it’s not even considered a programming language most of the time). But with some geometry, mathematics and some basic CSS rules, you can turn your browser into a canvas of your creativity!

我真的很喜欢CSS。 它不是一种真正复杂的语言(大多数时候甚至都不被视为编程语言)。 但是，有了一些几何，数学和一些基本CSS规则，您就可以将浏览器变成具有创造力的画布！

So let’s start. How would you create a heart with pure Geometry?

因此，让我们开始吧。 您将如何创建具有纯几何形状的心脏？

You just need a square and two circles. Right?

您只需要一个正方形和两个圆圈。 对？

And we can draw that with a single element, thanks to the ::after and ::before pseudo elements. Speaking about pseudo elements, ::after is a pseudo element which allows you to insert content into a page from CSS (without it needing to be in the HTML). ::before is exactly the same, only it inserts the content before any other content in the HTML instead of after.

而且，由于::after和::before伪元素，我们可以使用单个元素进行绘制。 说到伪元素， ::after是一个伪元素，它允许您将内容从CSS插入页面(无需在HTML中插入)。 ::before完全相同，只是它在HTML中的其他任何content之前而不是after之后插入content 。

For both pseudo elements, the end result is not actually in the DOM, but it appears on the page as if it would be.

对于这两个伪元素，最终结果实际上不在DOM中，但它看起来像在页面中一样。

So let’s create our heart.

因此，让我们创建自己的心。

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

You can easily notice that we define the square and its positioning by using the main ‘heart’ class and the two circles with the ::before and ::after pseudo elements. The circles are actually just 2 more squares that have their border-radius reduced to the half.

您可以轻松地注意到，通过使用主要的“心脏”类以及带有::before和::after伪元素的两个圆，我们定义了正方形及其位置。 圆圈实际上只是另外2个正方形，其边界半径减小了一半。

But what is a heart without beating?

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

Let’s create a pulse. Here we are going to use the @keyframes rule. The @keyframes CSS at-rule is used to define the behaviour of one cycle of a CSS animation.

让我们创建一个脉冲。 在这里，我们将使用@keyframes规则。 @keyframes CSS规则用于定义CSS动画一个周期的行为。

When we are using the keyframes rule, we can divide a time period to smaller parts and create a transformation/animation by splitting it into steps (each step corresponds to a percentage of the completion of the time period).

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

So let’s create the heartbeat. Our heartbeat animation consists of 3 steps:

因此，让我们创建心跳。 我们的心跳动画包括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. On 0% of the time period we start with no transformation.
   在0％的时间段内，我们不进行任何转换。
2. On 20% of the time period we scale our shape to 125% of its initial size.
   在20％的时间段内，我们将形状缩放到其初始大小的125％。
3. On 40% of the time period we scale our shape to 150% of its initial size.
   在40％的时间段内，我们将形状缩放到其初始大小的150％。

For the remaining 60% of the time period we leave time for our heart to return to its initial state.

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

Finally we have to assign the animation to our heart.

最后，我们必须将动画分配给我们。

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

That’s it!

而已！

We have a beating heart that will beat forever.Or maybe as long as your own love lasts…

我们有一颗跳动的心，它将永远跳动。或者也许只要你自己的爱持续下去……

Feel free to check out the related Codepen:

随时查看相关的Codepen：

I wish you a wonderful Valentine’s day!

祝您情人节快乐！

翻译自: https://www.freecodecamp.org/news/how-to-create-a-beating-heart-with-pure-css-for-your-valentine-2aeb05e2d36e/

css 跳动的心