圣诞flash动画教程步骤（圣诞节flash动画）
圣诞节flash动画（圣诞flash动画教程步骤） 一、效果 二、代码 index.html <!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=
圣诞节flash动画（圣诞flash动画教程步骤）
一、效果
二、代码
index.html
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title></title><linkrel="stylesheet"href="style.css"><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Tangerine"></head><body><ulid="wire"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><ul><h2>MerryChristmas!</h2>v</body></html>
style.css
body{background:#111;margin:0;}h2{color:#fff;position:relative;margin-top:200px;text-align:center;letter-spacing:0.2em;font-size:4em;font-family:'MountainsofChristmas';text-shadow:0px0px8pxrgba(255,65,185,1);}#wire{text-align:center;white-space:nowrap;position:absolute;padding:0;width:100%;top:-80px;border-bottom:3pxsolid#222;height:100px;}#wireli{position:relative;list-style:none;margin:015px;padding:0;display:inline-block;width:15px;height:30px;border-radius:50%;top:102px;background:#fff;/*animations*/animation-name:even-flash;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;}#wireli:nth-child(odd){animation-name:odd-flash;}#wireli:before{content:"";position:absolute;width:14px;height:10px;border-radius:4px;top:-5px;left:0;background:#444;}@keyframeseven-flash{0%,100%{background:rgba(255,230,65,1);box-shadow:0px2px20px4pxrgba(255,230,65,1);}50%{background:rgba(255,230,65,.5);box-shadow:0px2px20px4pxrgba(255,230,65,.5);}}@keyframesodd-flash{50%{background:rgba(255,65,185,1);box-shadow:0px2px20px4pxrgba(255,65,185,1);}0%,100%{background:rgba(255,230,65,.5);box-shadow:0px2px20px4pxrgba(255,65,185,.5);}}
三、详解
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash 动画，和 Javascripts。
CSS3 @keyframes 规则
要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是用来创建动画。@keyframes规则内指定一个 CSS样式和动画将逐步从目前的样式更改为新的样式。注意：Internet Explorer 10、Firefox 以及 Opera 支持@keyframes规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。
CSS3 动画
当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个 CSS3 的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
例子：
CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
例子：
常用属性
属性描述CSSDemo@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。单位s或ms3animation-timing-function规定动画的速度曲线。默认是 "ease"。其他还有：– linear– ease-in– ease-out– ease-in-out– step-start– step-end– steps(int, start/end)– cubic-bezier(n,n,n,n): 三次贝塞尔3animation-delay规定动画何时开始。默认是 0。3negative-animation-delay点击预览负值 animation-delay —— 进阶点击预览animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3
类似例子
示例01：
https://gitee.com/turingitclub/css-learning/blob/dev/base/animation.html
示例02：
https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_2.html
示例03 running hourse：
https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_3.html
steps(int, start|end)算是step-start和step-end的进化型,
step等同于steps(1, start)
step-end等同于steps(1, end)
因为只走了一步，如果我们把int步数增加，就会看到每个关键影格之间多了一些演算出来的影格，当然如果步数设定越多，看到的动画也会越流畅。（但需要这样，不用step就好了）比如：如果把上面的step-start改成steps(3, start),step-end改成steps(3,end)会得到下面的结果https://codepen.io/AlexZ33/pen/PowpKLb点击预览
如果熟练 steps 的用法，就能够很简单的使用 sprite 图片来做动画，什麽是 sprite 图片 呢？就是将许多图案集合成一张图，接著透过 CSS 的语法使这些图案分别呈现在网页裡，这样就能大幅减少多张图片载入的 request 数量。
上图是一张经典的 sprite 图片 ( Leland Stanford 所拍摄 )，只要透过 CSS 动画的 steps，我们也能很简单的让图片中的马儿跑起来。
