H5+CSS3简单动画 知识点 汇总

乱入几个： 

1.h5的一个语义化标签

  figure :用于规定独立的流内容（图像 图表 照片 代码等）

  figcapition：与figure配套使用，用于标签定义figure元素标题

2.媒体查询：

通过不同的媒体类型和条件定义样式规则 ；媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”：width: min-width;max-width 

  媒体查询可以用在@media和import规则上，也可以用在HTML和XML中。

 @media screen and (width:800px){...} 

 @import url(example.css) screen and (width:800px);

<link media="screen and (width:800px)" rel="stylesheet" href="example.css">

css3:

  优点：方便，无需js，适合做图片、文字的简单效果；

  缺点：不灵活；效果有限

划重点：

1. transform:变形。【transform：translate / rotete / scale / skew(平移 旋转，缩放，斜切)】
   

2. transition: 过渡。【transition： property, duration, timing-function（Linear,ease,ease-in,ease-out,ease-in-out）, delay】

• 必须要设置两个属性：  设置过渡效果的 CSS 属性的名称; 完成过渡效果需要多少秒或毫秒。                

 3、animation:动画。【animation：name/ duration/ timing-function/ iteration-count(播放次数)/ direction/ play-stete】

具体介绍：

  Transform :用于元素的变形处理  属性:  translate,Rotate,scale,skew  (平移 ,旋转，缩放，斜切)

 

transition： 用于设置四个过渡属性 属性：property,duration,timing-function,delay