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

今年的情人節

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

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

異地戀的依舊異地

同城戀的變成了同城網戀

隔離疫情，但不會隔離愛

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

做者把代碼也放到裏面了

隔離疫情，但不會隔離愛

2020，依舊【愛你愛你】

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

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

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

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

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

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

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

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

藉助::after和::before僞元素，咱們可使用單個元素進行繪製。說到僞元素，::after是一個僞元素，它使你能夠將內容從CSS插入頁面（不須要在HTML中）。::befor也是同樣的，只是它content在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;
}

用CSS創造一顆心

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

可是心怎麼能不跳動呢？

讓咱們建立一個脈衝。在這裏，咱們將使用@關鍵幀規則。@關鍵幀 CSS規則用於定義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%);
  }
}

建立心跳動畫

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

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

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

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

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

會動的當心心

好啦~

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

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