H5的新标签figure,figcaption

1.figure,figcaption

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

figcaption:与figure配套使用，用于标签定义figure元素的标题

兼容性：IE9+

eg:

<figure>

<img>

<figcaption></figcaption>

</figure>

 

2.transform

属性：rotate,scale,skew,translate

兼容性：IE9+

 

translate(x,y)   若只有一个参数，表示y=0,   2D平移

向右向下为正

 

rotate(deg)    2D旋转   需要先有transform-origin属性的定义

顺时针为正，逆时针为负

中心点：默认元素中心

 

scale(x,y)    2D缩放    若只有一个参数，y方向默认为0

skew(x,y)   斜切扭曲   若只有一个参数，y方向默认为0

向左为正

 

3.transition IE10+

property:参与过度的属性

duration:过度动画的持续时间

time-function:速度趋势

linear,ease,ease-in,ease-out,ease-in-out

delay:延迟过度的时间

 

4.效果：想让图片朦胧展示时（虚化一点），除了加遮罩层，还可以

小技巧：给图片加opacity来实现（前提是献给图片所在的父元素加background-color）

 

5.:nth-of-type()

eg:

p:nth-of-type(1){

意为：同级兄弟的p中第一个p标签（取值从1开始）

}

 

6.用transform,transition制作简单动画

先设置动画元素的初始位置或状态

再设置发生事件时动画元素的最终位置

最后让动画元素分先后展示，可设置延迟时间

最后用transition来控制动画

 

转载于:https://www.cnblogs.com/vivian123/p/8431643.html