一. 新增选择器
-
属性选择器
- input[value^="icon"] -
伪类选择器
- ul li : nth-child(n) -
伪元素选择器
- ::after / before
二. 过渡
过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。
<1> 语法
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
eg1：
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s
eg2：
/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s
补充：
- 下拉菜单的实现，可以通过元素的显示与隐藏完成
- 也可以通过，CSS3 的转换实现，比如当需要显示时，就 scaleY(1) ，需要隐藏时就 scaleY(0) ！！！哈哈哈，有点妙欸
三. 2D 转换
transform适用于 2D 和 3D 的转换！！！先来看 2D
<1> 移动 translate
(1) 语法
transform：translate（x,y)； // 沿 X 轴方向移动 x ，沿 Y 轴方向移动 y
或者可以分开写
transform: translateX（n）；
transform: translateY（n）；
(2)特点：
- 对行内标签不不起作用
- 不会影响其他元素的位置，如果移动到了其他元素所在的位置，不会把其他元素挤走，会与他发生重叠！！
- if 数值是百分比，那是相对于自身盒子的宽高。
- 常与绝对定位一起使用，帮助盒子实现居中显示
<2> 缩放 scale
(1) 语法
transform：scale（x,y) ;
transform: scale(n) ;
transform: scaleX(n) ;
transform: scaleY(n) ;
- 可以实现 x 方向和 y 方向分别放大/缩小不一样的比例
- 也可以实现，x 方向和 y 方向等比缩放
- 也可以单独指定 x 方向和 y 方向上的缩放！！
(2) 缩放的中心点 transform-origin
<3> 旋转 rotate
(1) 语法：
tramsform：rotate（度数）;
- 数值为正，就顺时针，为负，就逆时针转、
(2) 旋转的中心点 transform-origin
与上述的缩放的中心点一样滴！！！
注意：
- 如果旋转、移动、缩放要一起写的话，注意要把移动写在前面！！！
transform：translate（x，y） rotate（） scale（）
四. 3D 转换
<1> 3D 位移 translate3d
transform : translate3d(x,y,z)
//或者分开写
transform: translateX（n）；
transform: translateY（n）；
transform: translateZ（n）；
- translateZ 是物体距离屏幕的距离！！
<2> 3D 旋转 rotate3d
- 沿着 x 轴旋转
transform : rotateX()
- 沿着 y 轴旋转
transform : rotateY()
- 沿着 z 轴旋转 ---- 跟 2d 旋转的效果一样！！！
transform : rotateZ()
- 沿着
自定义轴旋转
transform : rotate3d(x,y,z,deg)
以 (x,y,z) 组成的矢量向量为轴进行旋转！！
<3> 3d 的效果呈现
要想把渲染的 3d 效果呈现出来（肉眼可以看见），就需要给要渲染的元素的父盒子加上透视+开启三维立体环境。
- 透视
perspective
透视也叫视距，【人眼睛到屏幕距离】
perspective : 500px;
注意： 视距越大就看到的元素越小，近大远小。而z轴是物体距离屏幕的距离，z轴越大，物体离屏幕距离越大，离我们眼睛距离越小，看到的物体越大。
- 开启三维立体环境
transform-style
transform-style ：flat（不开启，默认的）
transform-style ： preserve-3d （开启）
五. 动画
动画： （animition）可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的 动画效果。
<1> 语法
1.先定义动画
@keyframes 动画名称{
0% {
起始位置 也可以用from to
}
25% {
}
75% {
}
100% {
结束位置
}
}
eg:
2.再调用使用动画
div{
width：500px;
height: 500px;
animition-name: 动画名字；
animition-duration：持续时间；
}
上面的动画属性可以先写为
div{
width：500px;
height: 500px;
animition：动画名称 持续时间 *运动曲线* 何时开始 播放次数 是否反方向 动画起始结束状态
运动曲线的值：
-
linear是匀速的意思
-
easy是0—v—0模型
-
easy-in 从低速开始
-
easy-out 以低速结束
-
easy-in-out低速开始低速结束
