亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

@keyframes規(guī)則實現(xiàn)多重背景的CSS動畫

WEB前端開發(fā)   發(fā)布時間：2015-08-05 18:22:51   作者：佚名   我要評論
這篇文章主要介紹了@keyframes規(guī)則實現(xiàn)多重背景的CSS動畫,代碼中使用的是效果圖中顯示的素材,僅作為腳本示例在此便不提供下載了,需要的朋友可以參考下

定義和用法
通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間，或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
注釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。


語法

CSS Code復制內(nèi)容到剪貼板
  1. @keyframes animationname {keyframes-selector {css-styles;}}  


201585182125764.jpg (720×234)

多重背景動畫

CSS背景動畫在很長時間內(nèi)一直是一個熱門話題，主要因為不需要額外的元素，看起來效果也不錯。如果是有多重背景的CSS動畫呢，下面我們來看下是如何實現(xiàn)的。
先上個效果圖：
201585182146248.jpg (558×185)

CSS代碼
 

CSS Code復制內(nèi)容到剪貼板
  1. @keyframes animatedBird {   
  2.     from {   
  3.         background-position: 20px 20px, 30px 80px, 0 0;   
  4.     }   
  5.     to {   
  6.         background-position: 300px -90px, 30px 20px, 100% 0;   
  7.     }   
  8. }   
  9. @-webkit-keyframes animatedBird {   
  10.     from {   
  11.         background-position: 20px 20px, 30px 80px, 0 0;   
  12.     }   
  13.     to {   
  14.         background-position: 300px -90px, 30px 20px, 100% 0;   
  15.     }   
  16. }   
  17. @-ms-keyframes animatedBird {   
  18.     from {   
  19.         background-position: 20px 20px, 30px 80px, 0 0;   
  20.     }   
  21.     to {   
  22.         background-position: 300px -90px, 30px 20px, 100% 0;   
  23.     }   
  24. }   
  25. @-moz-keyframes animatedBird {   
  26.     from {   
  27.         background-position: 20px -90px, 30px 80px, 0 0;   
  28.     }   
  29.     to {   
  30.         background-position: 300px -90px, 30px 20px, 100% 0;   
  31.     }   
  32. }   
  33. .animate-area2 {   
  34.     width: 560px;   
  35.     height: 190px;   
  36.     background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);   
  37.     background-position: 20px -90px, 30px 80px, 0px 0px;   
  38.     background-repeat: no-repeat, no-repeat, repeat-x;   
  39.     animation: animatedBird 4s linear infinite;   
  40.     -ms-animation: animatedBird 4s linear infinite;   
  41.     -moz-animation: animatedBird 4s linear infinite;   
  42.     -webkit-animation: animatedBird 4s linear infinite;   
  43.     overflow: hidden;   
  44. }  

HTML代碼

XML/HTML Code復制內(nèi)容到剪貼板
  1. <div class="animate-area2"></div>  

demo演示地址:http://www.zjgsq.com/example?pid=1198

相關文章

  • 詳解CSS動畫屬性關鍵幀keyframes全解析

    這篇文章主要介紹了詳解CSS動畫屬性關鍵幀keyframes全解析的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-09

  • CSS3 @keyframes簡單動畫實現(xiàn)

    這篇文章主要介紹了CSS3 @keyframes簡單動畫實現(xiàn)的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-24

  • CSS3中的@keyframes關鍵幀動畫的選擇器綁定

    @keyframes可以幫助我們進行類似Flash中的關鍵幀動畫制作,這里我們來簡單討論一下CSS3中的@keyframes關鍵幀動畫的選擇器綁定,需要的朋友可以參考下
    2016-06-13

  • CSS3 中的@keyframes介紹

    CSS3新增動畫屬性“@keyframes”，從字面就可以看出其含義——關鍵幀，這與Flash中的含義一致。利用CSS3制作動畫效果其原理與Flash一樣，我們需要定義關鍵幀處的狀態(tài)效果，
    2014-09-02

  • 快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)

    這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以
    2020-02-25

最新評論