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

　　圣诞节flash动画（圣诞flash动画教程步骤）一、效果
　　二、代码
　　index。！DOCTYPEmetacharsetutf8metahttpequivXUACompatiblecontentIElinkrelstylesheethrefstyle。linkrelstylesheethrefhttps：fonts。googleapis。comcss？familyTh2MerryChristmas！h2
　　style。cssbody｛background：111；margin：0；｝h2｛color：position：margintop：200textalign：letterspacing：0。2fontsize：4fontfamily：39；MountainsofChristmas39；；textshadow：0px0px8pxrgba（255，65，185，1）；｝wire｛textalign：whitespace：position：padding：0；width：100；top：80borderbottom：3pxsolid222；height：100｝wireli｛position：liststyle：margin：015padding：0；display：width：15height：30borderradius：50；top：102background：animationsanimationname：animationduration：1s；animationiterationcount：animationfillmode：｝wireli：nthchild（odd）｛animationname：｝wireli：before｛content：；position：width：14height：10borderradius：4top：5left：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，我们也能很简单的让图片中的马儿跑起来。