本案例主要是運用到了css3的animation、keyframes、transform等屬性，熟悉了，就可以做更多的其他動畫效果，這幾個屬性功能非常強大。
首先，我們先來看看效果圖喲。
一、準備工作
1、需要了解animation、keyframes、transform屬性：
keyframes：讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式（或者說停留點）來控制css動畫的中間環節。這讓開發者能夠控制動畫中的更多細節而不是全部讓瀏覽器自動處理
transform：向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜值描述
測試none
定義不進行轉換。
測試matrix(n,n,n,n,n,n)
定義 2d 轉換，使用六個值的矩陣。
測試matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定義 3d 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)
定義 2d 轉換。
測試translate3d(x,y,z)
定義 3d 轉換。
translatex(x)
定義轉換，只是用 x 軸的值。
測試translatey(y)
定義轉換，只是用 y 軸的值。
測試translatez(z)
定義 3d 轉換，只是用 z 軸的值。
scale(x,y)
定義 2d 縮放轉換。
測試scale3d(x,y,z)
定義 3d 縮放轉換。
scalex(x)
通過設定 x 軸的值來定義縮放轉換。
測試scaley(y)
通過設定 y 軸的值來定義縮放轉換。
測試scalez(z)
通過設定 z 軸的值來定義 3d 縮放轉換。
rotate(angle)
定義 2d 旋轉，在引數中規定角度。
測試rotate3d(x,y,z,angle)
定義 3d 旋轉。
rotatex(angle)
定義沿著 x 軸的 3d 旋轉。
測試rotatey(angle)
定義沿著 y 軸的 3d 旋轉。
測試rotatez(angle)
定義沿著 z 軸的 3d 旋轉。
測試skew(x-angle,y-angle)
定義沿著 x 和 y 軸的 2d 傾斜轉換。
測試skewx(angle)
定義沿著 x 軸的 2d 傾斜轉換。
測試skewy(angle)
定義沿著 y 軸的 2d 傾斜轉換。
測試perspective(n)
為 3d 轉換元素定義透視檢視。
測試
2、本例子要規劃好各個環節動畫出場時間順序
二、例子分析
1、部分html**：
老婆，嫁給我好嗎？
.w-m img
@keyframes towoman
100%
}
.w-f
.w-f img
@keyframes show
100%
}
.w-t-m
@keyframes titlebloom
100%
}
.w-t img
.w-t img.boom2
.w-t img.boom3
@keyframes bloom
100%
}
.w-fls
.w-fls img
@keyframes showflows
100%
}.w-2
.w-2 img
演示demo效果
四、檔案截圖以及執行操作
1、檔案截圖
2、執行操作：
雙擊index.html即可看到效果。
五、瀏覽器相容性
1、目前只相容ie10+，firefox，360瀏覽器等主流瀏覽器
用css3實現求婚小動畫
然後一步步分析一下 w m img keyframes towoman 100 是乙個簡寫屬性，用於設定六個動畫屬性 keyframes 讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式 或者說停留點 來控制css動畫的中間環節。這讓開發者能夠控制動畫中的更多細節而不是全部讓瀏覽器自動處理 tr...
python求婚創意 用css3做乙個求婚小動畫
首先放張效果圖 然後一步步分析一下 首先是剛出現的新郎的動畫 w m img margin right 0 float right margin top 60px animation towoman 0.5s ease 5s both keyframes towoman 0 opacity 0 tr...
用 CSS3 做乙個流星雨動畫
昨天 ui 提交過來乙個登入頁的設計稿，要求背景有乙個流星雨動畫，做完之後覺得挺有趣，分享一下 一 流星動畫 首先建立乙個 div 作為畫布 div id stars div class star style top 0px left 500px div div html,body stars為了防...