CSS3

1. 属性选择器

• E[att]——选择具有att属性的E元素
• E[att=“val”]——选择具有att属性，且属性值等于val的E元素
• E[att^=“val”]——匹配具有att属性，且值以val开头的E元素
• E[att$=“val”]——匹配具有att属性，且值以val结尾的E元素
• E[att*=“val”]——匹配具有att属性，且值中含有val的E元素

不用起类名就可以选择

2. 结构伪类选择器

• E:first-child;——匹配父元素中的第一个子元素E
• E:last-child;——匹配父元素中最后一个E元素
• E:nth-child(n);——匹配父元素中的第n个子元素E
• E:first-of-type;——指定类型E的第一个
• E:last-of-type;——指定类型E的最后一个
• E:nth-of-type(n);——指定类型E的第n个

:nth-child(n) 选择父元素中的第几个，不分类型

:nth-of-type(n) 选择指定类型的第几个元素

3. 伪元素选择器

• :before()
• :after()
  before，after 会创建一个行内元素（没有大小），不是真的元素，在dom里面看不见。
• 格式：类型::{ content=“内容”；}
• 权重为1

类选择器、属性选择器、伪类选择器的权重为10。

4. 2D转换

转换（transform）可以实现元素的位移、旋转、缩放等效果。

4.1 移动：translate

4.1.1 语法

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

4.1.2 注意点

• 定义2D转换中的移动。沿着X和Y轴移动元素；
• translate最大的优点：不会影响到其他元素的位置；
• translate中的“%”是相对于自身元素的translate:(50%,50%);
• 对行内标签没有效果。

4.2 旋转：rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

4.2.1 语法

transform:rotate(度数deg)；

4.2.2 注意点

• rotate里面跟度数，单位是deg，比如rotate(45deg);
• 角度为正时，顺时针；负时，为逆时针；
• 默认旋转的中心点是元素的中心点。
• **transition:all 0.3s;**表示变化过程0.3s，谁做过渡给谁加。

4.2.3 转换中心点

我们可以设置元素转换的中心点。

• transform-origin : x y;
• x y默认转换的中心点是元素的中心点（50% 50%）；
• x y可以设置 像素 或者 方位名词（top bottom left right center）

4.3 缩放：scale

4.3.1 语法

transform:scale(x,y);
里面写的数字没有单位，是倍数的意思。

4.3.2 注意点

• 缩放不会影响其他的元素；
• 可以设置缩放的中心点，transform-origin : x y;默认以中心点缩放；

5. 动画

通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相较于过渡，动画可以实现连续自动播放的效果。

5.1 动画的基本使用

制作动画分两步：

5.1. 1 定义动画；

用 keyframes 定义动画（类似定义类选择器）
@keyframes 动画名称
{
0%/from{ 原状态；}
xx%{ 过程状态（用于定义多个状态的变化，可以省略）}
100% /to{ 最终状态；}
}
百分比要是整数，表示持续时间的百分比划分。

5.1.2. 调用动画。

animation-name:动画名称；
animation-duration:持续时间；

5.2 动画的常用属性

• @keyframes——规定动画；
• animation——所有动画属性的简写属性，除了animation-play-state属性；
• animation-name——规定@keyframes动画的名称；（必须）
• animation-duration——规定动画完成一个周期所花费的秒或毫秒，默认是0；（必须）
• animation-timing-function——规定动画的速度曲线，默认是“ease”;
• animation-delay——规定动画合适开始，默认是0；
• animation-iteration-count——规定动画播放次数，默认是1，无限循环infinite;
• animation-direction——规定动画是否下一周期逆行播放，默认是“normal”,"alternate"逆播放；
• animation-play-state——规定动画是否正在运行或暂停，默认是“running”，还有"paused";
• animation-fill-mode——规定动画结束后状态，保持位置forwards，回到起始backwards。

5.3 动画简写属性

• animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。
• 简写不包括animation-play-state属性。

5.4 速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是“ease”

• linear——动画匀速
• ease——动画以低速开始，然后加块，在结束前变慢
• ease-in——动画以低速开始
• ease-out——动画以低速结束
• ease-in-out——动画以低速开始和结束
• steps()——指定了动画分几个间隔完成

6. 3D转换

6.1 三维坐标系

• x轴：水平向左为正
• y轴：垂直向下为正
• z轴：垂直屏幕向外为正

6.2 3D位移：translate3d(x,y,z)

• transform:translateX(**px)：仅仅在X轴上移动
• transform:translateY(**px)：仅仅在Y轴上移动
• transform:translateZ(**px)：仅仅在Z轴上移动
• transform:translate3d(x,y,z)：其中x,y,z分别指要移动的轴的方向的距离

6.3 透视:perspective

• perspective:xxpx;
• 透视也称视距：指人的眼睛到屏幕的距离
• 透视写在被观察元素的父盒子上
• transform:translateZ(xxpx);有了透视，就能看到元素在Z轴上的变化了

6.4 3D旋转:rotate3d(x,y,z)

• transform:rotateX(xxdeg)：沿着x轴正方向旋转xx度
• transform:rotateY(xxdeg)：沿着y轴正方向旋转xx度
• transform:rotateZ(xxdeg)：沿着z轴正方向旋转xx度
• transform:rotate3d(x,y,z,xxdeg)：沿着自定义轴旋转xxdeg，x,y,z表示旋转轴的矢量，0/1

6.5 3D呈现:transform-style

• 控制子元素是否开启三维立体环境
  transform-style:flat 子元素不开启3d立体空间，默认
  transform-style:preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子

7. 浏览器私有前缀

• -moz-：代表firefox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit-：代表safari、chrome私有属性
• -o-：代表Opera私有属性