今天没有说什么内容，只是对HTML5的细节补充，如HTML结构的可以省略到最大的地步

animation 这里是放内容的

没有了基本的结构标签了，浏览器会自动帮我们生成。

还有标签的属性的双引号也可以省略；

HTML5让我体验到它在最大化的简化标签，使代码量最小化。

还有调试工具的使用，调试工具让我们更快的更准确的查到各方面的信息，

大大提高了写代码的效率，如console控制台的使用，可以快速的查找到错误在哪。

还有模拟各种设配的屏幕大小，响应式的测试，让响应式代码编写提供方便。

还有一个网络network查看，可以让看到各种请求的信息，和为优化页面方面的信息，如

文件的大小。

今日内容到此，接下来是今天看到的一个响应式网站的动画，而下面是它的实现。

今天看到一个logo到弹出按钮的过渡动画，而它的实现是完全HTML5+css3的代码。

所用到主要的知识是css3的animation属性，还有一个div css sprites精灵，简单叫法：图片精灵；

什么是图片精灵？

其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。

这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，

特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

然后开始实现：

首先要去目标网站拔图片。

下面是图片：

 然后是使用ps测总长度，测每个的间距，这个可以使用到切片工具，在你对图片切割好时双击图片会有个图片的信息，如图片所在的位置x,y，图片的宽高w、h。

这样就可以快点测出图片的位置了，然后使用当前一张位置x减前一张个图片位置x，就可以测出间距了。

先放效果图：

代码：

animation #container{ width height margin background #container:hover{ -webkit-animation animation @keyframes doMove{ 0%{background-position 3% 6% 8% 10% 12% 13% 14% 15% 16% 17% 18% 19% 20% 21% 22% 23% 24% 25% 26% 27% 28% 29% 30% 31% 32% 34% 36% 38% 41% 45% 48% 60% 100% } @-webkit-keyframes doMove{ 0%{background-position 3% 6% 8% 10% 12% 13% 14% 15% 16% 17% 18% 19% 20% 21% 22% 23% 24% 25% 26% 27% 28% 29% 30% 31% 32% 34% 36% 38% 41% 45% 48% 60% 100% }

 这里只做了Chrome 和 Safari 的兼容；

Chrome 和 Safari 的前缀 -webkit-。

如需要兼容其他自己兼容。