誰說程序員只是個敲代碼的,浪漫起來分分鐘讓女朋友欲罷不能。
首先放張效果圖
然後一步步分析一下
首先是剛出現的新郎的動畫
裡面用到的知識點:
animation:是一個簡寫屬性,用於設置六個動畫屬性
animation-name 規定需要綁定到選擇器的 keyframe 名稱
animation-duration 規定完成動畫所花費的時間,以秒或毫秒計
animation-timing-function 規定動畫的速度曲線
animation-delay 規定在動畫開始之前的延遲
animation-iteration-count 規定動畫應該播放的次數
animation-direction 規定是否應該輪流反向播放動畫
keyframes:讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式(或者說停留點)來控制CSS動畫的中間環節。這讓開發者能夠控制動畫中的更多細節而不是全部讓瀏覽器自動處理
transform 向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
然後是那朵花的css
文字部分的css
文字邊煙花的效果
最後幾束花的效果
不是在文章評論里