心形是乙個非常流行的形狀,在這片文章裡我們將使用純css畫出心形,然後使用css動畫實現心動的效果.
在此之前,我們必須要了解偽元素::after 和 ::before的作用,::before建立乙個偽元素，其將成為匹配選中的元素的第乙個子元素。常通過content屬性來為乙個元素新增修飾性的內容。
在下面的例子裡, :before 偽類元素用來給 class 為heart的元素新增乙個正方形。
.heart:before在上面的例子當中,class 為 heart元素的:before 偽類新增了乙個黃色的長方形,長方形的 height 和 width 分別為50px 和70px .由於設定了其邊框半徑為25%,所以長方形為圓角長方形,與其相對位置為距離left 5px ,以及向top偏移50px.
在這裡我們已經實現了畫心的需要,剩下的就是給設定心動的動畫效果.
首先簡單的複習一下和動畫有關的知識點.
如果要給元素新增動畫,我們需要了解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
running
當前動畫正在執行
pause
當前動畫可以被停止
animation-timing-function(畫在每一動畫週期中執行的節奏)
ease
慢-快-很慢
linear
勻速ease-in
先慢後快
ease-out
先快後慢
ease-in-out
慢-快-慢
#anim
@keyframes colorful
100%
}
心跳動畫的每一秒包含兩個部分。heart元素（包括:before和:after）使用transform屬性改變其大小，背景div使用background屬性改變其顏色。
心跳動畫的每一秒包含兩個部分,heart元素 (包括:before 和 :after) 使用transform屬性改變其大小,背景 div 使用background-color屬性改變其顏色.
設定每個盒子的樣式:
.back
.heart
.heart:after
.heart:before
@keyframes backdiv
}@keyframes beat
50%
}
css的過渡效果以及動畫
純乾貨 只有命令 和命令的使用方式 使得css屬性值，在一段時間內平滑變換的乙個效果 1.過渡效果四要素 1.指定過渡元素 指定那個屬性值在變化時需要使用過渡效果 2.指定過渡時間 多長時間完成過渡 3.指定過渡時間的快慢 過度變換中的快慢 4.指定過渡到延遲時間 當激發過渡後，等待多長時間才激發效...
CSS動畫效果
2d 3d 轉換 1 通過2d 3d 轉換，我們能夠對元素進行移動 縮放 轉動 拉長 拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果，可以使用2d或 3d轉換來轉換元素 2 2d transform 屬性 轉換方法的值 1 translate 水平移動 垂直移動 移動 2 rotate 數字 de...
CSS動畫效果
css變形效果 transform translate 平移 translate x,y translatex x translatey y 相對於元素原始位置平移。scale 縮放 大於1放大，小於1縮小。rotate 旋轉 單位 deg度 grad 梯度 rad 弧度 turn 轉 圈 tran...