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 跳動的心