CSS3关键帧动画
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3关键帧动画
本文转载自创美优品，转载就保留此信息。我决定探索该地区的CSS3关键帧动画。的想法很简单-创造一种虚拟明信片。我住在巴黎，所以很明显我给你我的问候，从巴黎:)
下载源文件
（。psd文件）
明信片从巴黎的。zip 1.9MB
CSS3的动画支持：Chrome浏览器2 +，Safari 4的+，火狐5 +，iOS的Safari浏览器3.2和
Android 2.1系统+（源碎杂志）。
我们将3个要素：云中的动画（有三个层次的云），旋转法尔灯和艾菲尔铁塔闪闪发光。
的HTML结构其实很简单：
Bonne Nuit
PARIS !
id="sparkling2">
我们将使用下面的图片（我将讨论一点点波光粼粼的效果），让我们先来完成的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;
-moz-animation: wind 80s linear infinite; }
与适当的元素相关联的动画和定义的持续时间，定时功能和迭代次数，（我用的是速记符号）。
法尔光动画
这一次，我们将同时动画的
不透明度
和旋转的旋转起源于它的顶部中心点（在上面的图片）法尔光。
@-webkit-keyframes phare { 0% { -webkit-transform:rotate(0deg); opacity:0} 50% { -webkit-transform:rotate(180deg); opacity:1} 100%
{ -webkit-transform:rotate(360deg); opacity:0;} } #phare
{-webkit-transform-origin: center top; -webkit-animation: phare 15s linear infinite;}
（在这里，进一步，重复相同的与
-万盎司-
前缀）。
添加火花
我们将使用两种不同的图像与波光粼粼的效果，下面是造型：
#eiffel_wrap { position:absolute; width:240px; height:462px; right:10px; top: 180px; opacity:0;} #sparkling1 { position:absolute; background:
url('images/sparkling1.png') no-repeat; width:240px; height:462px; opacity:0;} #sparkling2 { position:absolute; background: url('images/sparkling2.png') no-repeat; width:240px; height:462px; opacity:0;}
我们将动画的
＃eiffel_wrap的
，
＃sparkling1
和
＃sparkling2的
。
@-webkit-keyframes sparkling { 0% {opacity:0;} 50%{opacity:1;} 100%
{opacity:0;} }
我们的想法是使用闪耀的动画变成和在的
＃sparkling1
和
＃sparkling2的