用css3作一個求婚小動畫

首先放張效果圖

github地址

而後一步步分析一下

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

.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;
}

最後

個人更多文章內容：微信公衆號搜索 有一個姑娘在coding 跟我頭像的那個就是了一塊兒學前端，共同進步