CSS3實現的多重背景效果程式碼

本章節介紹一下如何給一個元素設定多個背景圖片，並且具有一定的動畫效果，下面就分佈介紹一下。

一.設定多個背景圖片:

[CSS] 純文字檢視 複製程式碼
div{ 
  background-image: url(twitter-logo-bird.png),url(treehouseFrog.png),url(bg-clouds.png);
  background-position:20px -90px, 30px 80px, 0px 0px;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

二.設定一定的動畫效果:

[CSS] 純文字檢視 複製程式碼
@keyframes animatedBird{
  from{background-position: 20px 20px, 30px 80px, 0 0;}
  to{ background-position: 300px -90px, 30px 20px, 100% 0;}
}
div{ 
  animation:animatedBird 4s linear infinite;
}