神級程序員用40行代碼向女友求婚成功，網友：求源碼

今天剛來上班逛下論壇，看到了一位浪漫程序員用代碼向女朋友求婚，小編我也運行了下他分享的代碼，挺有意思的今天就分享給大夥了，源碼文末有領取地址。誰說程序員只是個敲代碼的，浪漫起來分分鐘讓女朋友欲罷不能。

首先放張效果圖

然後一步步分析一下

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

裡面用到的知識點：

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

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

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

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

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

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

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

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

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

然後是那朵花的css

文字部分的css

文字邊煙花的效果

最後幾束花的效果

轉載自頭條@我和前端有個約定。

本文由「李漢科技」發布，2017年6月23日。