心形是一個非常流行的形狀,在這片文章裏我們將使用純css畫出心形,然後使用css動畫實現心動的效果.
在此之前,我們必須要瞭解僞元素::after 和 ::before的作用,::before 創建一個僞元素，其將成爲匹配選中的元素的第一個子元素。常通過 content 屬性來爲一個元素添加修飾性的內容。
在下面的例子裏, :before 僞類元素用來給 class 爲heart的元素添加一個正方形。
.heart:before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
:before 和 :after 必須配合content來使用,這個屬性通常用來給元素添加內容諸如圖片或者文字.當:before 和 :after僞類用來添加某些形狀而不是圖片或文字是,content實行依舊是必須的,但是它的值可以值空字符串.
在上面的例子當中,class 爲 heart元素的:before 僞類添加了一個黃色的長方形,長方形的 height 和 width 分別爲50px 和70px .由於設置了其邊框半徑爲25%,所以長方形爲圓角長方形,與其相對位置爲距離left 5px ,以及向top偏移50px.
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform :rotate(-45deg);
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
content:'' ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
在這裏我們已經實現了畫心的需要,剩下的就是給設置心動的動畫效果.
首先簡單的複習一下和動畫有關的知識點.
如果要給元素添加動畫,我們需要了解animation 屬性以及 @keyframes 規則.animation屬性用於控制動畫的外觀,@keyframes 規則控制動畫中各個階段的變化.總共有8個animation 屬性.
| 屬性 | 意義 | |
| animation-name | 設置動畫名稱 | |
| animation-duration | 動畫執行所花費的時間(可以是小數,但必須是正數),例animation-duration:1s; | |
| animation-delay | 在頁面打開之後,動畫延遲多長時間開始執行,例,animation-delay : 3s; | |
| animation-timing-mode(運行結束的狀態) | forwards | 動畫結束後停在最後一幀 |
| backforwards | 動畫結束後返回第一幀 | |
| animation-iterator-count | num(1,2,3....) | 動畫運行的次數 |
| infinite | 動畫一直循環往復運動 | |
| animation-direction(運行方向) | alternate | 正反交替運行 |
| reverse | 反向運行 | |
| alternate-revers | 先倒着播放再順着播放 | |
| animation-play-state(播放狀態) | running | 當前動畫正在運行 |
| pause | 當前動畫可以被停止 | |
| animation-timing-function(畫在每一動畫週期中執行的節奏) | ease | 慢-快-很慢 |
| linear | 勻速 | |
| ease-in | 先慢後快 | |
| ease-out | 先快後慢 | |
| ease-in-out | 慢-快-慢 | |
@keyframes 能夠創建動畫。 創建動畫的原理是將一套 CSS 樣式逐漸變化爲另一套樣式。具體是通過設置動畫期間對應的“frames”的 CSS 的屬性，以百分比來規定改變的時間，或者通過關鍵詞“from”和“to”，等價於 0% 和 100%。打個比方，CSS 裏面的 0% 屬性就像是電影裏面的開場鏡頭。CSS 裏面的 100% 屬性就是元素最後的樣子，相當於電影裏的演職員表或者鳴謝鏡頭。CSS 在對應的時間內給元素過渡添加效果。下面舉例說明 @keyframes 和動畫屬性的用法：
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
id 爲 anim 的元素，代碼設置 animation-name 爲 colorful，設置 animation-duration 爲 3 秒。然後把 @keyframes 引用到名爲 colorful 的動畫屬性上。 colorful 在動畫開始時（0%）設置顏色爲藍色，在動畫結束時（100%）設置顏色爲黃色。注意不是隻有開始和結束的過渡可以設置，0% 到 100% 間的任意百分比你都可以設置。
心跳動畫的每一秒包含兩個部分。heart元素（包括:before和:after）使用transform屬性改變其大小，背景div使用background屬性改變其顏色。
心跳動畫的每一秒包含兩個部分,heart元素 (包括:before 和 :after) 使用transform屬性改變其大小,背景 div 使用background-color屬性改變其顏色.
設置每個盒子的樣式:
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
animation-iteration-count:infinite;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
添加動畫:
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
html部分:
<div class="back"></div>
<div class="heart"></div>
最終效果如下:
