CSS3--选择器、动画效果
一、复杂选择器：
（1）兄弟选择器：选择当前元素平级的兄弟元素
有两种：1）相邻兄弟选择器：仅选择相邻的1个元素: 选择器+选择器
相邻兄弟选择器的三个关键词：1. 紧临 2. 平级 3. 之后
2）兄弟选择器：选择之后的所有元素：选择器~选择器
*注意：不要求紧临*
何时使用：只要选择平级元素时，都要使用兄弟选择器
（2）属性选择器：按自定义条件选择元素
何时属性选择器：只要按照任意属性或属性值自定义选择条件时，就用属性选择器。
如何使用：
1. [属性名]: 选择所有包含指定属性名的元素——太泛
2. 其他选择器[属性名]:
选择首先满足其他选择器的元素，再在其中选择包含指定属性名的元素
3. 其他选择器[条件]：
选择首先满足其他选择器的元素，再在其中选择满足条件的元素。
其中：条件：5种方式：
属性名="属性值"：选择包含指定属性名且属性值与给定值相等。——等值条件
模糊选择条件：部分匹配
属性名^="关键字"：选择包含指定属性名，且属性值必须以关键字*开头*的元素。
属性名$="关键字"：选择包含指定属性名，且属性值必须以关键字*结尾*的元素。
属性名*="关键字"：选择包含指定属性名，且属性值只要*包含*关键字的元素
属性名~="单词"：选择包含指定属性名，且属性中包含指定*单词*的元素。
否定伪类：选择不满足属性选择器条件的元素
如何使用：选择器:not([条件])
伪元素选择器：选择特定位置上的文字的选择器
伪类选择器：当元素状态发生改变时生效的选择
* :target ：选择当前正在被跳转到的锚点元素
特点1：仅选择一个
特点2：通过点击，触发其他元素样式的变化
元素状态伪类：——专用于修饰表单中的元素
:enabled :匹配每个可用的元素
:disabled :匹配每个禁用的元素
:checked :匹配每个选中的单选/多选按钮
* 结构伪类：修饰处于特殊位置上的元素样式
子元素:first-child :作为父元素下的第一个子元素
比如：tr:first-child
子元素:last-child :作为父元素下的最后一个子元素
子元素:only-child :作为父元素下的唯一一个子元素
父元素:empty :选择不包含任何节点的父元素
强调：看不见得空字符/回车,都是节点
何时使用：只要选择特殊位置上的子元素，都要用结构伪类
1. 变形：
旋转：rotate() 位移：translate()缩放:scale()倾斜：skew()
旋转：围绕一个*参照原点*,旋转指定*角度*
语法：transform:rotate(ndeg)//n>0顺时针，n<0逆时针
坐标原点：图片左上角：0,0
参照原点：默认：width/2,height/2
50% 50%
修改参照原点：/*transform-origin: 100% 100%;*/
/*transform-origin:right bottom;*/
transform-origin:x坐标 y坐标;
位移：沿着*坐标轴*，移动指定的*距离*
语法：transform:translate(x轴移动距离，y轴移动距离);
坐标轴方向：x向右为正，y向下为正
变形过程：
浏览器先加载所有元素，固定所有元素的大小和位置
变形发生时，提升元素的层级，再变形。
结论：变形不会挤压周围元素。但可能遮挡其它元素
其它位移函数：2个：
仅延x轴位移：translateX(x轴移动距离)
仅延y轴位移：translateY(y轴移动距离)
缩放：
语法：transform:scale(倍数)——等比例缩放
倍数：0-1，缩小; 1以上,放大
transform:scale(x坐标缩放倍数,y坐标缩放倍数)
其它缩放函数：2个
仅延x轴缩放：scaleX(x坐标缩放倍数)
仅延y轴缩放：scaleY(y坐标缩放倍数)
*强调：缩放同样也会受参照原点的影响
参照原点的位置，在变形中永远不变！*
3d变形：
perspective 属性：
假定的人眼位置到投影平面(网页)的距离
如何使用：在3d变换元素的父元素上定义perspective属性
3d位移：特指延z轴位移。向网页外为正，向网页内为负
语法：transform:translateZ(延z轴位移距离)
transform:translate3d(x,y,z)
注意：延z轴位移，导致其他坐标轴刻度缩小或放大。
3d旋转：特指延任意一个坐标轴旋转
语法：transform:rotateX(ndeg)
n>0,向后倒；n<0,向前倒
transform:rotateY(ndeg)
n>0,向右转；n<0,向左转
transform:rotateZ(ndeg)-->transform:rotate()
了解：rotate3d(x,y,z,deg);
其中x,y,z表示1(正向)或-1(反向).
3d缩放：transform:scaleZ(倍数)
将对应坐标轴上的坐标*相应倍数
了解：transform:scale3d(x,y,z)
transform属性后，可同时使用多种变化函数。
浏览器会从左向右依次变化！
比如：transform:translateX(100px) rotate(30)
transform:rotate(30) translateX(100px)
*rotate()函数本质，旋转坐标轴，而不是仅旋转图片*
1. transition:过渡/渐变
从*开始样式*，经过指定*时间*后，缓慢过渡到*结束样式*
语法：
transition:需要过渡的属性名 经过多长时间 变化类型 延迟
强调：和开始样式写在一起！
多个属性同时过渡：简写：
transition: 属性名1 时长 变化类型 [延迟],
属性名2 ... ... ,
属性名n ... ...
过渡子属性：——了解
1. 专门设置过渡属性名：
transition-property:属性名1 属性名2 ...;
2. 专门设置过渡持续时间：
transition-duration:ns/nms ... ...
3. 专门设置过渡类型：
transition-timing-function:
备选值：ease:先加速再减速
linear: 匀速
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速再减速
4. 专门设置过渡开始前的延迟时间：
transition-delay:ns/nms ... ...
2. 关键帧动画：
关键帧：动画运行过程中的关键样式状态
关键帧动画：动画在多个关键帧之间顺序变化
如何实现：2步：
1. 定义动画，设计动画中的关键帧
@keyframes 动画名{
from{动画初始状态}
n%{动画运行到n%位置时的状态}
... ...
to{动画结束状态}
}
2. 需要触发动画的位置，触发动画
animation:动画名 动画持续时间 变化类型
动画子属性：
1. 专门设置动画名：animation-name
2. 专门设置动画时间：animation-duration
3. 专门设置变化类型：animation-timing-function
4. 专门设置动画保持结束状态：
animation-fill-mode:forwards
5. 专门设置重复次数：animation-iteration-count:n
infinite：无限次
6. 专门设置播放方向：animation-direction:
alternate: 奇数次正向播放，偶数次反向播放
暂停动画：animation-play-state:paused;
