css3控制多個背景圖片移動形成動畫效果程式碼例項

admin發表於2017-02-19
原文網址 : https://www.softwhy.com/article-1345-1.html
CSSS3動畫

本章節分享一段程式碼例項，它實現了通過css3的@keyframes實現了控制元素的多個背景圖片的移動，於是實現動畫效果，關於@keyframes可以參閱CSS3的@keyframes用法詳解一章節。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
@keyframes animatedBird {
  from {
    background-position: 20px 20px, 30px 80px, 0 0;
  }
  to {
    background-position: 300px -90px, 30px 20px, 100% 0;
  }
}
@-webkit-keyframes animatedBird {
  from {
    background-position: 20px 20px, 30px 80px, 0 0;
  }
  to {
    background-position: 300px -90px, 30px 20px, 100% 0;
  }
}
@-ms-keyframes animatedBird {
  from {
    background-position: 20px 20px, 30px 80px, 0 0;
  }
  to {
    background-position: 300px -90px, 30px 20px, 100% 0;
  }
}
@-moz-keyframes animatedBird {
  from {
    background-position: 20px -90px, 30px 80px, 0 0;
  }
  to {
    background-position: 300px -90px, 30px 20px, 100% 0;
  }
}
.animate-area2{
  width: 560px;
  height: 190px;
  background-image:url(img/twitter-logo-bird.png),url(img/treehouseFrog.png),url(img/bg-clouds.png);
  background-position: 20px -90px, 30px 80px, 0px 0px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  animation: animatedBird 4s linear infinite;
  -ms-animation: animatedBird 4s linear infinite;
  -moz-animation: animatedBird 4s linear infinite;
  -webkit-animation: animatedBird 4s linear infinite;
  overflow: hidden;
}
</style>
</head>
<body>
<div class="animate-area2"></div>
</body>
</html>

完整程式碼下載如下: 

css3控制多個背景圖片移動形成動畫效果程式碼例項css3動畫.rar

相關文章