css3實現求婚小動畫

這篇文章主要介紹了關於css3實現求婚小動畫，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

昨天在公眾號中看到這一篇文章，瞬間覺得css太強大了，只要你想做，everything is possible！

首先放張

然後一步步分析一下：

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

.w-m img{margin-right: 0;float: right;margin-top: 60px;animation: toWoman 0.5s ease .5s both;}@keyframes toWoman{0%{opacity: 0;transform: translate(-200px);}100%{opacity: 1;transform: translate(0);}}

裡面用到的知識點：

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

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

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

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

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

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

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

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

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

然後是那朵花的css

.w-f{    position: absolute;    z-index: 20;    left: 50%;    margin-left: -30px;    margin-top: 75px;}.w-f img{width: 60px;animation: show 0.4s ease 1s both;}@keyframes show{0%{opacity: 0;transform: scale(0.1,0.1);}100%{opacity: 1;transform: scale(1,1);}}

文字部分的css

.w-t-m{position: absolute;left: 50%;z-index: 10;line-height: 80px;color: #ff720a;letter-spacing: 5px;opacity: 0;animation: titleBloom 1s linear 1s both;font-size: 26px;    margin-left: -125px;}@keyframes titleBloom{0% {    transform: translate(-50px);}100% {opacity: 1;    transform: translate(0);}}

文字邊煙花的效果

.w-t img{opacity: 0;    animation: bloom 2s ease 1.2s infinite;}.w-t img.boom2{float: right;animation: bloom 2s ease 1.5s infinite;}.w-t img.boom3{position: absolute;margin-top: 40px;animation: bloom 2s ease 1.4s infinite;}@keyframes bloom{0% {    transform: scale(0,0);}100% {opacity: 1;    transform: scale(1,1);}}

最後幾束花的效果

.w-fls{width: 820px;margin: 0 auto;}.w-fls img{height: 120px;z-index: 400;animation: showFlows 0.4s ease 2.3s both;}@keyframes showFlows{0%{opacity: 0;transform: translate(0,200px);}100%{opacity: 1;transform: translate(0);}}.w-2{margin-top: -130px;padding-left: 100px;}.w-2 img{animation: showFlows 0.4s ease 2.7s both;}

寫到這裡，覺得前端開發原來是這麼有趣的一件事哈~