css3實現求婚小動畫

來源:互聯網
上載者:User
這篇文章主要介紹了關於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;}

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

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。