CSS3相关

一、CSS新增选择器

1、属性选择器

1. E[att] 选择具有att属性的E元素
2. E[att=“val”] 选择具有att属性且属性值等于val的E元素
3. E[att^=“val”] 匹配具有att属性且值以val开头的E元素
4. E[att$=“val”] 匹配具有att属性且值以val结尾的E元素
5. E[att*=“val”] 匹配具有att属性且值中含有val的E元素

2、结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

1. E：first-child 匹配父元素中的第一个子元素E
2. E：last-child 匹配父元素中最后一个E元素
3. E：nth-child(n) 匹配父元素中的第n个子元素E
4. E：first-of-type 指定类型E的第一个
5. E：last-of-type 指定类型E的最后一个
6. E：nth-of-type(n) 指定类型E的第n个

【区别】：

1、nth-child：对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配

2、nth-of-type：对父元素里面指定子元素进行排序选择。失去匹配E，然后再根据E找第n个孩子

3、伪元素选择器

1. ::before 在元素内部的前面插入内容
2. ::after 在元素内部的后边插入内容

【注意】：

​ 1、before和after创建一个元素，但是属于行内元素

​ 2、新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素

​ 3、语法：element : :before { }

​ 4、before和after必须有content属性

​ 5、before在父元素内容的前面创建元素，after在父元素内容的后边插入元素

​ 6、伪元素选择器和标签选择器一样，权重为1

【伪元素的使用场景】：

​ 1、伪元素字体图标

​ 2、伪元素清除浮动

4、CSS其他新特性

1、CSS3 滤镜 filter

​ filter CSS 属性将模糊或颜色偏移等图形效果应用于元素

​ filter ：函数（）；例如：filter ：blur（5px）；blur模糊处理，数值越大越模糊

2、CSS3 calc函数：
calc（）在声明CSS属性值时执行一些计算

width：calc（100% -80px）;

括号里面可以使用 + - * /来进行计算
3、CSS3 过渡特性
transition:要过渡的属性 花费时间 运动曲线 何是开始；
1、属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以
2、花费时间：单位时秒，
3、运动曲线：默认是ease（可以省略）
4、何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s(可以省略)

二、2D转换

1、移动：transform

​ transform：translate( x , y)；对行内标签没有效果

2、旋转：rotate

​ transform：rotate（deg）；正数顺时针，负数逆时针

​ 更改旋转的中心点：transform - origin : x y ;

3、缩放：scale

​ transform : scale ( x , y) ; 不会影响其他盒子，可以设置中心点

三、3D转换

一、三维坐标系其实就是指立体空间，立体哦那关键是由x,y,z轴共同组成的。

1、x轴：水平向右 注意：x右边是正值，左边是负值

2、y轴：垂直向下 注意：y下边是正值，上边是负值

3、z轴：垂直屏幕 注意：往外面是正值，往里面是负值

二、透视perspective

在2D平面产生近大远小视觉立体，但只是二维效果的

1、如果想要在网页产生3D效果需要透视

2、z轴越大，我们看到的物体就越大

三、3D呈现：transfrom-style:preserve-3d;

1、控制子元素是否开启三维立体环境

2、transfrom-style:preserve-3d;子元素开启立体空间

3、代码写给父级，但是影响的是子盒子

四、CSS3动画

1、用keyframes定义动画（类似定义类选择器）

@keyframes	move{
​	0%{
​	width:100px;
​	}
​	100%{
​	width:200px;
​	}
}
div{
	width:100px;
	height:200px;
	background-color:pink;
	animation:move;
	animation-duration:2s;
}

2、动画常用属性

• keyframes 规定动画
• animation 所有动画的简写属性
• animation-name 规定@keyframes动画的名称
• animation-duration 规定动画完成一个周期所花费的秒或者毫秒，持续时间
• animation-timing-function 规定动画的速度曲线，默认是“ease”，运动曲线
• animation-delay 规定动画何时开始，默认是0
• animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite，重复次数
• animation-direction 规定动画是否在下一周期逆向播放，默认“normal”，alternate逆播放，
• animation-fill-mode 动画结束后的状态，默认是backwards，回到起始状态，我们可以让他停留在结束状态forwards

三、动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation：myfirst 5s linear 2s infinite alternate;