圣诞节flash动画（圣诞flash动画教程步骤）

　　圣诞节flash动画（圣诞flash动画教程步骤）一、效果
　　二、代码
　　index。htmllt；！DOCTYPEhtmlgt；lt；htmlgt；lt；headgt；lt；metacharsetutf8gt；lt；metahttpequivXUACompatiblecontentIEedgegt；lt；titlegt；lt；titlegt；lt；linkrelstylesheethrefstyle。cssgt；lt；linkrelstylesheethrefhttps：fonts。googleapis。comcss？familyTangerinegt；lt；headgt；lt；bodygt；lt；ulidwiregt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ligt；lt；ulgt；lt；h2gt；MerryChristmas！lt；h2gt；vlt；bodygt；lt；htmlgt；
　　style。cssbody｛background：111；margin：0；｝h2｛color：fff；position：relative；margintop：200px；textalign：center；letterspacing：0。2em；fontsize：4em；fontfamily：39；MountainsofChristmas39；；textshadow：0px0px8pxrgba（255，65，185，1）；｝wire｛textalign：center；whitespace：nowrap；position：absolute；padding：0；width：100；top：80px；borderbottom：3pxsolid222；height：100px；｝wireli｛position：relative；liststyle：none；margin：015px；padding：0；display：inlineblock；width：15px；height：30px；borderradius：50；top：102px；background：fff；animationsanimationname：evenflash；animationduration：1s；animationiterationcount：infinite；animationfillmode：both；｝wireli：nthchild（odd）｛animationname：oddflash；｝wireli：before｛content：；position：absolute；width：14px；height：10px；borderradius：4px；top：5px；left：0；background：444；｝keyframesevenflash｛0，100｛background：rgba（255，230，65，1）；boxshadow：0px2px20px4pxrgba（255，230，65，1）；｝50｛background：rgba（255，230，65，。5）；boxshadow：0px2px20px4pxrgba（255，230，65，。5）；｝｝keyframesoddflash｛50｛background：rgba（255，65，185，1）；boxshadow：0px2px20px4pxrgba（255，65，185，1）；｝0，100｛background：rgba（255，230，65，。5）；boxshadow：0px2px20px4pxrgba（255，65，185，。5）；｝｝
　　三、详解
　　CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和Javascripts。CSS3keyframes规则
　　要创建CSS3动画，你将不得不了解keyframes规则。
　　keyframes规则是用来创建动画。keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
　　注意：InternetExplorer10、Firefox以及Opera支持keyframes规则和animation属性。Chrome和Safari需要前缀webkit。CSS3动画
　　当在keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
　　指定至少这两个CSS3的动画属性绑定向一个选择器：
　　规定动画的名称
　　规定动画的时长
　　例子：
　　CSS3动画是什么？
　　动画是使元素从一种样式逐渐变化为另一种样式的效果。
　　您可以改变任意多的样式任意多的次数。
　　请用百分比来规定变化发生的时间，或用关键词from和to，等同于0和100。
　　0是动画的开始，100是动画的完成。
　　为了得到最佳的浏览器支持，您应该始终定义0和100选择器。
　　例子：
　　常用属性
　　属性描述CSSDemokeyframes规定动画。3
　　animation所有动画属性的简写属性，除了animationplaystate属性。3
　　animationname规定keyframes动画的名称。3
　　animationduration规定动画完成一个周期所花费的秒或毫秒。默认是0。单位s或ms3
　　animationtimingfunction规定动画的速度曲线。默认是ease。
　　其他还有：
　　linear
　　easein
　　easeout
　　easeinout
　　stepstart
　　stepend
　　steps（int，startend）
　　cubicbezier（n，n，n，n）：三次贝塞尔
　　3hranimationdelay规定动画何时开始。默认是0。3negativeanimationdelay点击预览
　　负值animationdelay进阶点击预览animationiterationcount规定动画被播放的次数。默认是1。3
　　animationdirection规定动画是否在下一周期逆向地播放。默认是normal。3
　　animationplaystate规定动画是否正在运行或暂停。默认是running。3
　　类似例子示例01：
　　https：gitee。comturingitclubcsslearningblobdevbaseanimation。html示例02：
　　https：gitee。comturingitclubcsslearningblobdevbaseanimation2。html示例03runninghourse：
　　https：gitee。comturingitclubcsslearningblobdevbaseanimation3。html
　　steps（int，startend）算是stepstart和stepend的进化型，
　　step等同于steps（1，start）
　　stepend等同于steps（1，end）
　　因为只走了一步，如果我们把int步数增加，就会看到每个关键影格之间多了一些演算出来的影格，当然如果步数设定越多，看到的动画也会越流畅。（但需要这样，不用step就好了）
　　比如：如果把上面的stepstart改成steps（3，start），stepend改成steps（3，end）会得到下面的结果
　　https：codepen。ioAlexZ33penPowpKLb点击预览
　　如果熟练steps的用法，就能够很简单的使用sprite图片来做动画，什麽是sprite图片呢？就是将许多图案集合成一张图，接著透过CSS的语法使这些图案分别呈现在网页裡，这样就能大幅减少多张图片载入的request数量。
　　上图是一张经典的sprite图片（LelandStanford所拍摄），只要透过CSS动画的steps，我们也能很简单的让图片中的马儿跑起来。