CSS精灵
作业做了一个使用CSS 精灵（Sprites）的，让一些人物的背景图片（sprite sheet）图片动起来的动画（Animations）。感觉很有趣。感觉到CSS3的强大。同时在网上找了诸多的其他的人物背景动画观察这些图片动起来的感觉。看着从前玩过的游戏人物从自己手上动起来，很有趣！
这些Sprites sheets动起来效果一定会很棒
background-position可以准确定位到背景图片的位置，我们在Animation中把关键帧设置为图片从开始的 0px 和 图片结束的位置(xx)px。再给它设定为无限次循环的动画。然后使用一个steps(n),填上n为动画角色的N中状态。就是这样，蒙太奇的效果显现出来，漫画变动画。
Animations
要让这些漫画动起来，CSS的Animations可一定要懂得用。它的属性有：
- Animations-name
- Animations-duration
- Animations-iteration-count
- Animations-delay
- Animation-direction
- Animation-play-state
- Animation-fill-mode
- Animation-timing-function
通过这些属性的配合使用，我们的HTML页面从此动起来了！
网络上存在着很多配合理解上课知识的内容
要学好CSS光是背一些属性和值还不够。我们还要在了解和熟悉这些属性的基础值上，在网络上多看多学，并跟着他们的脚步，完成一个个有趣的小项目。这样的学习模式也许是最合适做开发者学习的模式了。就是说：不能光说不练。
下一周开始媒体查询（Media Query）期待ing.
初学者的代码
附上本次的作业源码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>西游记</title> <style> body { margin: 0; /* padding: 0; */ overflow: hidden; background-color: skyblue; } #huaban { background-image: url("../img/background.jpg"); background-repeat: repeat-x; margin: 5rem auto; position: relative; height: 785px; display: flexbox; animation-name: huaban; animation-duration: 2s; animation-timing-function: steps(0); animation-iteration-count: infinite; } @keyframes huaban { 0% {} 100% {} } #ts { width: 170px; height: 170px; background-image: url(../img/ts.png); display: block; position: absolute; right: 40%; bottom: 30%; animation-name: ts; animation-duration: 1s; animation-timing-function: steps(8); animation-iteration-count: infinite; } @keyframes ts { 0% { background-position: 0 0; } 100% { background-position: -1360px 0; } } #wk { width: 200px; height: 180px; background-image: url(../img/wk.png); display: block; position: absolute; right: 50%; bottom: 30%; animation-name: wk; animation-duration: 1s; animation-timing-function: steps(8); animation-iteration-count: infinite; } @keyframes wk { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } #bj { width: 200px; height: 180px; background-image: url(../img/bj.png); display: block; position: absolute; right: 25%; bottom: 30%; animation-name: bj; animation-duration: 1.8s; animation-timing-function: steps(8); animation-iteration-count: infinite; } @keyframes bj { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } #ss { width: 190px; height: 130px; background-image: url(../img/ss.png); display: block; position: absolute; right: 20%; bottom: 30%; animation-name: ss; animation-duration: 1.8s; animation-timing-function: steps(8); animation-iteration-count: infinite; } @keyframes ss { 0% { background-position: 0 0; } 100% { background-position: -1680px 0; } } </style></head><body> <div id="huaban"> <div id="ts"></div> <div id="wk"></div> <div id="bj"></div> <div id="ss"></div> </div></body></html>
附上四个Sprites Sheet
附上人物背景图
结语
有更好的方法请指导一下。这些动画精灵还是有点懵。
生命不息，奋斗不止。奋斗！求知！
