圣诞节flash动画(圣诞flash动画教程步骤)
一、效果
二、代码
index.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"></head><body> <ul id="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>Merry Christmas!</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: 'Mountains of Christmas'; text-shadow: 0px 0px 8px rgba(255,65,185,1); }#wire{ text-align:center; white-space:nowrap; position: absolute; padding: 0; width: 100%; top:-80px; border-bottom: 3px solid #222; height: 100px; }#wire li { position: relative; list-style: none; margin: 0 15px; 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; }#wire li:nth-child(odd){ animation-name: odd-flash; }#wire li:before{ content: ""; position: absolute; width: 14px; height: 10px; border-radius: 4px; top:-5px; left: 0; background:#444; }@keyframes even-flash { 0% ,100%{ background:rgba(255,230,65,1); box-shadow: 0px 2px 20px 4px rgba(255,230,65,1); } 50%{ background:rgba(255,230,65,.5); box-shadow: 0px 2px 20px 4px rgba(255,230,65,.5); } }@keyframes odd-flash { 50%{ background:rgba(255,65,185,1); box-shadow: 0px 2px 20px 4px rgba(255,65,185,1); } 0% ,100%{ background:rgba(255,230,65,.5); box-shadow: 0px 2px 20px 4px rgba(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规定动画。3
animation所有动画属性的简写属性,除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。单位s或ms3
animation-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): 三次贝塞尔
3
animation-delay规定动画何时开始。默认是 0。3negative-animation-delay点击预览
负值 animation-delay —— 进阶点击预览animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-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,我们也能很简单的让图片中的马儿跑起来。