程序員用40行代碼向女友求婚成功，快來學……

來源：廣州傳智播客

誰說程序員只是個敲代碼的，浪漫起來分分鐘讓女朋友欲罷不能。

首先放張效果圖

GIF/223K

然後一步步分析一下

首先是剛出現的新郎的動畫

裡面用到的知識點：

animation：是一個簡寫屬性，用於設置六個動畫屬性

animation-name 規定需要綁定到選擇器的 keyframe 名稱

animation-duration 規定完成動畫所花費的時間，以秒或毫秒計

animation-timing-function 規定動畫的速度曲線

animation-delay 規定在動畫開始之前的延遲

animation-iteration-count 規定動畫應該播放的次數

animation-direction 規定是否應該輪流反向播放動畫

keyframes：讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式（或者說停留點）來控制CSS動畫的中間環節。這讓開發者能夠控制動畫中的更多細節而不是全部讓瀏覽器自動處理

transform向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜

然後是那朵花的css

文字部分的css

文字邊煙花的效果

最後幾束花的效果

小編拉你進粉絲微信群

不是在文章評論里

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！