css3怎么實(shí)現(xiàn)小鳥

這篇文章主要介紹了css3怎么實(shí)現(xiàn)小鳥的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css3怎么實(shí)現(xiàn)小鳥文章都會有所收獲，下面我們一起來看看吧。

css3 寫小鳥的核心原理是用到了css3 的自定義動畫屬性keyframes ，它很靈活，允許你創(chuàng)建更多不一樣的動畫效果。寫法

@keyframes myName

{

0% {xxxx}

10% {xxxx}

20% {xxxx}

30% {xxxx}

}

小鳥的代碼片段是這樣的，通過調(diào)用不同的背景圖片

@keyframes myFrist

{

0% {background:url(images/bird1.png);background-size: 100% 100%}

12.5% {background:url(images/bird2.png);background-size: 100% 100%}

25% {background:url(images/bird3.png);background-size: 100% 100%}

37.5% {background:url(images/bird4.png);background-size: 100% 100%}

50% {background:url(images/bird5.png);background-size: 100% 100%}

65.7% {background:url(images/bird6.png);background-size: 100% 100%}

75% {background:url(images/bird7.png);background-size: 100% 100%}

87.5% {background:url(images/bird8.png);background-size: 100% 100%}

100% {background:url(images/bird1.png);background-size: 100% 100%}

}

關(guān)于“css3怎么實(shí)現(xiàn)小鳥”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css3怎么實(shí)現(xiàn)小鳥”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。