心跳 CSS

生活中我們所見到的大部分圖形(正方形、長方形、圓形、橢圓、三角形、多邊形...)都是可以用css3來實現，以及一些復雜點的圖形——其實都是由基本圖形組合而成的。

由於明天就是情人節了，所以今天我們就用css3畫一個心形然后再利用css3實現心跳的動畫：

首先分析一下，心跳都可以用哪些基本圖形組成

方案一：兩個圓 + 正方形

下面我們開始用代碼來實現這個圖形

先創建一個 div 給它添加一個 class 為 heart

<div class="heart"></div>

heart的樣式是寬和高都為200px的正方形

.heart{
   width: 200px;
   height: 200px;
   background: #f00;
   position: relative;
}

我們再利用偽元素 before 和 after 來畫出另外兩個圓，另外兩個圓的直徑和我們正方形的寬度是一樣的

.heart:before, .heart:after{
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: #f00;
    border-radius: 100px;
}                

再對  before 和 after 的位置做微調整，before  偽元素相對於正方形左移一個半徑的距離，after 偽元素相對於正方形上移一個半徑的距離

.heart:before{
   left: -100px;  
}
.heart:after{
   left: 0;
   top: -100px;
}

我們再利用 filter 給心形添加一個陰影，不了解filter的可以點擊這里

 現在離成功只差一步了，利用css3的旋轉讓心形擺正,我們重新完善 heart 樣式

.heart{
   width: 200px;
   height: 200px;
   background: #f00;
   position: relative;
   filter:drop-shadow(0px 0px 20px rgb(255,20,20));
   transform: rotate(45deg);  
}

現在我們可以看一下到目前我們的成果是什么樣的：

 由於旋轉后心形的外觀發生了一點變化，如下圖，我們再次對 heart 的寬和高樣式進行調整

.heart{
   width: 198px;
   height: 198px;
   background: #f00;
   position: relative;
   filter:drop-shadow(0px 0px 20px rgb(255,20,20));
   transform: rotate(45deg);  
}

調整后的效果：

現在我們就給心形加上心跳的動畫，分析心跳的狀態，它是由放大和縮小兩者交替循環播放的~

使用css3的 keyframes 再配合css3的縮放 scale 就可以實現心跳的效果，這里需要注意的一點是如果你 heart 樣式有旋轉 rotate 的代碼，在keyframes動畫中也需要添加上

代碼如下：

@keyframes heartbeat{
    0%{transform: rotate(45deg) scale(0.8,0.8); opacity: 1;}
    25%{transform: rotate(45deg) scale(1,1); opacity: 0.8;}
    100%{transform: rotate(45deg) scale(0.8,0.8); opacity: 1;}
}

終於大功告成了！ 看一下我們最終的效果：

 

 

下面簡單介紹一下另一種方法

方案二：兩個長方形(比例是2:3 | 3:2)

其實這兩種方案都差不多，思路已提供有興趣的可以自己動手寫一下~

明天就是情人節了，預祝大家情人節快樂！