2020，請你平安地，在我身邊

今年的情人節

讓咱們比任什麼時候候都更珍惜愛和但願

更懂得那句「必定要注意安全啊~」的肺腑之意

異地戀的依舊異地

同城戀的變成了同城網戀

隔離疫情，但不會隔離愛

咱們在Medium上爲你們找到了一個能夠發送愛心的教程

做者把代碼也放到裏面了

隔離疫情，但不會隔離愛

2020，依舊【愛你愛你】

如何用CSS爲建立一顆跳動的當心心

每一年2月14日，不少人都會選擇用交換卡片、糖果、禮物或鮮花來向喜歡的人表達心意。

可是程序員在情人節能夠爲他們的愛人作什麼呢？

個人答案是：使用CSS併發揮創造力！

我真的很喜歡CSS。它其實並非一種複雜的語言（大多數時候甚至都不被認爲是編程語言）。可是，經過運用一些幾何、數學和基本的CSS規則，就能夠將瀏覽器變成具備創造力的畫布！

因此，讓咱們開始吧。如何建立具備純幾何形狀的桃心？

由正方形和兩個圓圈組成的心

能夠看到，其實咱們只須要一個正方形和兩個圓形。

藉助::after和::before僞元素，咱們可使用單個元素進行繪製。說到僞元素，::after是一個僞元素，它使你能夠將內容從CSS插入頁面（不須要在HTML中）。::befor也是同樣的，只是它content在HTML中的其餘任何內容以前而不是以後插入。

對於這兩個僞元素，最終結果實際上並非在DOM中，而是在頁面上顯示，就好像它是在頁面上同樣。

接下來，就讓咱們來建立本身的小桃心吧~

1.heart {
 2  background-color: red;
 3  display: inline-block;
 4  height: 50px;
 5  margin: 0 10px;
 6  position: relative;
 7  top: 0;
 8  transform: rotate(-45deg);
 9  position: absolute; 
10  left: 45%; top: 45%;
11  width: 50px;
12}
13
14.heart:before,
15.heart:after {
16  content: "";
17  background-color: red;
18  border-radius: 50%;
19  height: 50px;
20  position: absolute;
21  width: 50px;
22}
23
24.heart:before {
25  top: -25px;
26  left: 0;
27}
28
29.heart:after {
30  left: 25px;
31  top: 0;
32}

用CSS創造一顆心

能夠看到，經過使用主要的「心」類以及帶有::before和::after僞元素的兩個圓來定義正方形及其位置。圓圈實際上只是另外2個正方形，其邊界半徑減少了一半。

可是心怎麼能不跳動呢？

讓咱們建立一個脈衝。在這裏，咱們將使用@關鍵幀規則。@關鍵幀 CSS規則用於定義CSS動畫一個週期的行爲。

使用關鍵幀規則時，咱們能夠將時間段劃分爲較小的部分，並經過將其分紅多個步驟來建立轉換/動畫（每一個步驟對應於該時間段完成的百分比）。

建立心跳動畫包括3個步驟：

1@keyframes heartbeat {
 2  0% {
 3    transform: scale( 1 );    
 4  }
 5  20% {
 6    transform: scale( 1.25 ) 
 7      translateX(5%) 
 8      translateY(5%);
 9  } 
10  40% {
11    transform: scale( 1.5 ) 
12      translateX(9%) 
13      translateY(10%);
14  }
15}

建立心跳動畫

一、在0％的時間段內，咱們不進行任何轉換。

二、在20％的時間段內，咱們將形狀縮放到其初始大小的125％。

三、在40％的時間段內，咱們將形狀縮放到其初始大小的150％。在剩下的60％的時間裏，咱們留出時間讓心臟恢復到初始狀態。

最後，咱們必須將動畫分配給咱們。

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

會動的當心心

好啦~

這就是一顆會一直跳動着的心。

 

 

歡迎點擊「京東雲」瞭解更多精彩內容