作者：leap_frog
https://segmentfault.com/a/1190000009798046
首先放張效果圖
然後一步步分析一下：
首先是剛出現的新郎的動畫
裡面用到的知識點：
- animation：是一個簡寫屬性，用于設定六個動畫屬性
- animation-name 規定需要綁定到選擇器的 keyframe 名稱
- animation-duration 規定完成動畫所花費的時間，以秒或毫秒計
- animation-timing-function 規定動畫的速度曲線
- animation-delay 規定在動畫開始之前的延遲
- animation-iteration-count 規定動畫應該播放的次數
- animation-direction 規定是否應該輪流反向播放動畫
- keyframes：讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式(或者說停留點)來控制 CSS 動畫的中間環節。這讓開發者能夠控制動畫中的更多細節而不是全部讓浏覽器自動處理
- transform 向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
然後是那朵花的 css
文字部分的 css
文字邊煙花的效果
最後幾束花的效果
寫到這裡，覺得前端開發原來是這麼有趣的一件事哈~
源碼：https://github.com/sunweiling/wedding
分享一套 <一套前端就業體系課>視訊教程，4大階段，7個步驟，從0到全棧，讓前端不止于前端。提升技術實戰能力+體驗真實開發流程+收獲優秀面試作品。領取方式加我微信(qq449245884)，回複大前端就可以免費獲得。
❤️愛心三連擊
1.看到這裡了就點個在看支援下吧，你的「點贊，在看」是我創作的動力。
2.關注公衆号
大遷世界
，回複「1」加入前端進階交流群！「在這裡有好多 前端 開發者，會讨論 前端 知識，互相學習」！
3.也可添加微信【qq449245884】，一起成長。