首先放張效果圖

然后一步步分析一下：

首先是剛出現(xiàn)的新郎的動畫

.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：是一個簡寫屬性，用于設(shè)置六個動畫屬性

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

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

• animation-timing-function 規(guī)定動畫的速度曲線

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

• animation-iteration-count 規(guī)定動畫應(yīng)該播放的次數(shù)

• animation-direction 規(guī)定是否應(yīng)該輪流反向播放動畫

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

• transform 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜

然后是那朵花的 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;
}

寫到這里，覺得前端開發(fā)原來是這么有趣的一件事哈~

源碼：https://github.com/sunweiling/wedding