H5、C3新特性

H5、C3新特性：

一、HTML5的新特性

1、拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，

2、自定义属性data-id

3、语义化更好的标签（header, nav，footer，aside，article ，section）

4、音频、视频（audio、video）如果浏览器不支持自动播放的时候，在属性中添加autoplay

5、画布Canvas

6、地理（Geolocation）

7、本地离线存储（localStorage）长期储存数据，浏览器关闭后数据不丢失

8、sessionStorage的数据在浏览器关闭后自动删除

9、表单控件：calendar、date、time、url、search、tel、file、number

10、新的技术：webworker、websocket、Geolocation

二、CSS3新特性

1、颜色：新增RGBA、HSLA模式

2、文字阴影：（text-shadow）

3、边框：圆角（border-radius）边框阴影：box-shadow

4、盒子模型：box-sizing

5、背景：background-size,background-origin background-clip(削弱)

6、渐变：linear-gradient(线性渐变):

eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);

radial-gradient (径向渐变)

7、过渡：transition可实现动画

8、自定义动画：animate@keyfrom

9、媒体查询：多栏布局@media screen and (width:800px)

10、border-image

11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放

12、3D转换

13、字体图标：font-size

14、弹性布局：flex

三、简述tranform 、transition 、animation 的作用

（1）tranform:描述了元素的静态样式 ，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩形变形matrix

transition和animation两者都能实现动画效果

transition常常配合transition和animation使用

（2）transition样式过渡，从一个效果逐渐改变为另一种效果

transition是一个合写属性

Transition:transition-propertry transition-duration transition-timing-function transition-delay

从左到到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

transition通常和hover等事件配合使用，需要由事件来触发过渡

（3）animation 动画由@keyframes来描述每一帧的样式

区别：

1、transform 仅描述元素的静态样式，常常配合transtion和animation使用

2、transtion通常和hover等事件配合使用，需要由事件来触发过渡

3、animation可设置循环次数

4、animation可设置每一帧的样式和时间，transtion只能设置头尾

5、transition可与js配合使用，js设定要变化的样式，transition负责动画效果