今天没有说什么内容，只是对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-。
如需要兼容其他自己兼容。
时间： 2025-01-02 04:48:30