你的位置:首页 > 网页设计

[网页设计]今日提及之动画animation


今天没有说什么内容,只是对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-。

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