前端 -- css基础 05 [精灵图(雪碧图) 补间动画(过渡) H5新特性] -- {彩蛋: 实现元素的隐藏的几种方式}

css基础 05

1. ☞精灵图(雪碧图)

总结： —>网上有些软件针对精灵图选取位置
1. 精灵图其实就是一张背景图 —》 background

使用步骤：

1. 将精灵图作为元素的背景图。

2. 通过background-position改变精灵图位置

3. 改变精灵图位置的时候，水平方向必须向左移动。垂直方向向上移动

2. ☞过渡(补间动画)

复合属性：

/* 设置当前标签中哪个属性要有动画效果 */
transition-property: all;

/* 设置动画完成的时间 */
transition-duration: 1s;

/* 设置动画的速度类型 linear匀速的 ease(默认值) ease-in ease-out ease-in-out*/
transition-timing-function: linear;
属性合写：

  1. 必须设置过渡的时间

  2. 没有顺序的要求

3. ☞ H5 新特性

新特性：

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket,Geolocation
   移除的元素：
10. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
11. 对可用性产生负面影响的元素：frame，frameset，noframes；
    支持HTML5新标签：
12. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

4. ☞ 实现元素隐藏的几种方式

• 实现元素隐藏的方式
  Opacity：0
  Display：none
  Visibility：hidden
  Position：-2000px

• display:none和 visbility: hidden 的区别

• display: none 将元素的显示设为无，即在网页中不占任何的位置

• visbility: hidden 将元素隐藏，但是在网页中该占的位置还是占着