Zi 字媒體

今天剛來上班逛下論壇，看到了一位浪漫程序員用代碼向女朋友求婚，小編我也運行了下他分享的代碼，挺有意思的今天就分享給大夥了，源碼文末有領取地址。誰說程序員只是個敲代碼的，浪漫起來分分鐘讓女朋友欲罷不能。首先放張效果圖然後一步步分析一下首先是剛出現的新郎的動畫裡面用到的知識點：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日。