标签：
今天没有说什么内容，只是对HTML5的细节补充，如HTML结构的可以省略到最大的地步
<!DOCTYPE html>
<meta charset="UTF-8"> <title>animation</title> 这里是放内容的
没有了基本的结构标签了，浏览器会自动帮我们生成。
还有标签的属性的双引号也可以省略；
<input type=text>
HTML5让我体验到它在最大化的简化标签，使代码量最小化。
还有调试工具的使用，调试工具让我们更快的更准确的查到各方面的信息，
大大提高了写代码的效率，如console控制台的使用，可以快速的查找到错误在哪。
还有模拟各种设配的屏幕大小，响应式的测试，让响应式代码编写提供方便。
还有一个网络network查看，可以让看到各种请求的信息，和为优化页面方面的信息，如
文件的大小。
今日内容到此，接下来是今天看到的一个响应式网站的动画，而下面是它的实现。
今天看到一个logo到弹出按钮的过渡动画，而它的实现是完全HTML5+css3的代码。
所用到主要的知识是css3的animation属性，还有一个div css sprites精灵，简单叫法：图片精灵；
什么是图片精灵？
其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。
这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，
特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
然后开始实现：
首先要去目标网站拔图片。
下面是图片：
然后是使用ps测总长度，测每个的间距，这个可以使用到切片工具，在你对图片切割好时双击图片会有个图片的信息，如图片所在的位置x,y，图片的宽高w、h。
这样就可以快点测出图片的位置了，然后使用当前一张位置x减前一张个图片位置x，就可以测出间距了。
先放效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style> #container{ width: 200px; height: 130px; margin: 0 auto; background: url(图片地址) no-repeat -58px -5px; } #container:hover{ -webkit-animation:doMove 3s; animation: doMove 3s; } @keyframes doMove{ 0%{background-position: -58px -5px;} 3%{background-position: -368px -5px;} 6%{background-position: -678px -5px;} 8%{background-position: -988px -5px;} 10%{background-position: -1298px -5px;} 12%{background-position: -1608px -5px;} 13%{background-position: -1918px -5px;} 14%{background-position: -2228px -5px;} 15%{background-position: -2538px -5px;} 16%{background-position: -2848px -5px;} 17%{background-position: -3158px -5px;} 18%{background-position: -3468px -5px;} 19%{background-position: -3778px -5px;} 20%{background-position: -4088px -5px;} 21%{background-position: -4398px -5px;} 22%{background-position: -4708px -5px;} 23%{background-position: -5018px -5px;} 24%{background-position: -5328px -5px;} 25%{background-position: -5638px -5px;} 26%{background-position: -5948px -5px;} 27%{background-position: -6258px -5px;} 28%{background-position: -6568px -5px;} 29%{background-position: -6878px -5px;} 30%{background-position: -7188px -5px;} 31%{background-position: -7498px -5px;} 32%{background-position: -7808px -5px;} 34%{background-position: -8118px -5px;} 36%{background-position: -8428px -5px;} 38%{background-position: -8738px -5px;} 41%{background-position: -9048px -5px;} 45%{background-position: -9358px -5px;} 48%{background-position: -9668px -5px;} 60%{background-position: -9668px -5px;} 100%{background-position:-9668px -5px; } } @-webkit-keyframes doMove{ 0%{background-position: -58px -5px;} 3%{background-position: -368px -5px;} 6%{background-position: -678px -5px;} 8%{background-position: -988px -5px;} 10%{background-position: -1298px -5px;} 12%{background-position: -1608px -5px;} 13%{background-position: -1918px -5px;} 14%{background-position: -2228px -5px;} 15%{background-position: -2538px -5px;} 16%{background-position: -2848px -5px;} 17%{background-position: -3158px -5px;} 18%{background-position: -3468px -5px;} 19%{background-position: -3778px -5px;} 20%{background-position: -4088px -5px;} 21%{background-position: -4398px -5px;} 22%{background-position: -4708px -5px;} 23%{background-position: -5018px -5px;} 24%{background-position: -5328px -5px;} 25%{background-position: -5638px -5px;} 26%{background-position: -5948px -5px;} 27%{background-position: -6258px -5px;} 28%{background-position: -6568px -5px;} 29%{background-position: -6878px -5px;} 30%{background-position: -7188px -5px;} 31%{background-position: -7498px -5px;} 32%{background-position: -7808px -5px;} 34%{background-position: -8118px -5px;} 36%{background-position: -8428px -5px;} 38%{background-position: -8738px -5px;} 41%{background-position: -9048px -5px;} 45%{background-position: -9358px -5px;} 48%{background-position: -9668px -5px;} 60%{background-position: -9668px -5px;} 100%{background-position:-9668px -5px; } } </style> </head> <body> <div id="container"></div> </body> </html>
这里只做了Chrome 和 Safari 的兼容；
Chrome 和 Safari 的前缀 -webkit-。
如需要兼容其他自己兼容。
标签：
原文地址：http://www.cnblogs.com/zhangzhicheng/p/5742908.html
