CSS3关键帧动画.docxVIP

CSS3关键帧动画本文转载自/ \t _blank创美优品，转载就保留此信息。我决定探索该地区的CSS3关键帧动画。的想法很简单-创造一种虚拟明信片。我住在巴黎，所以很明显我给你我的问候，从巴黎:)? /wp-content/uploads/2011/08/PostcardFromParis.zip下载源文件（。psd文件）明信片从巴黎的。zip 1.9MBCSS3的动画支持：Chrome浏览器2 +，Safari 4的+，火狐5 +，iOS的Safari浏览器3.2和Android 2.1系统+（源/2011/05/17/an-introduction-to-css3-keyframe-animations/ \t _blank碎杂志）。我们将3个要素：云中的动画（有三个层次的云），旋转法尔灯和艾菲尔铁塔闪闪发光。的HTML结构其实很简单：!DOCTYPE html html head meta charset=utf-8 / titleGreetings from Paris/title /head body div id=wrap h1Bonne Nuit emPARIS !/em/h1 div id=phare/div div id=eiffel/div div id=eiffel_wrap div id=sparkling1/div div id=sparkling2/div /div div id=roofs/div footerby PeHaa, Paris 2011/footer /div /body /html 我们将使用下面的图片（我将讨论一点点波光粼粼的效果），?让我们先来完成的CSS样式表：动画云独立动画的三个层次的云，我们使用的下列关键帧。（注意，每次我使用的-webkit-和-MOZ-前缀）。/* will be applied to #wrap that has 3 backgrounds layers */ @-webkit-keyframes wind { 0% {background-position: 0px 200px,0px 350px, left top;} 50% {background-position: 500px 40px,600px 450px, left top;} 100% {background-position: 1000px 200px,1200px 350px, left top} } @-moz-keyframes wind { 0% {background-position: 0px 200px,0px 350px, left top;} 50% {background-position: 500px 40px,600px 450px, left top;} 100% {background-position: 1000px 200px,1200px 350px, left top} } /* will be applied to #roofs that has 2 backgrounds layers */ @-webkit-keyframes wind1 { 0% {background-position: 100px 250px, left bottom;} 50% {background-position: 650px 150px, left bottom;} 100% {background-position: 1300px 250px, left bottom} } @-moz-keyframes wind1 { 0% {background-position: 100px 250px, left bottom;} 50% {background-position: 650px 150px, left bottom;} 100% {background-position: 1300px 250px, left bottom} } 这样我们已经确定了我们的动画的开始，中间和结束的背景，地位，财产。接下来，我们添加：#wrap {-webkit-animation: wind 80s linear infinite; -moz-animation: wind 80s linear infinite;} #roofs {-webkit-animation: wind 80s linear infinite;