新增的选择器
属性选择器
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 元素
结构伪类选择器
E:first-child匹配父元素中第一个子元素 EE:last-child匹配父元素中最后一个子元素 EE:net-child(n)匹配父元素中第 n 个子元素 EE:first-of-type指定类型 E 的第一个E:last-of-type指定类型 E 的最后一个E:nth-of-type(n)指定类型 E 的第 n 个
伪元素选择器
伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构
-
::before在元素内部的前面插入内容 -
::after在元素内部的后面插入内容
这两个元素必须有 content 属性
语法如下：
element::before {
content: "";
}
CSS3 盒子模型
css3 中可以通过 box-sizing 来指定盒模型，有两个值 content-box 和 border-box，设置之后盒子大小的计算方式就发生了改变
box-sizing: content-box盒子大小为 width+padding+border (以前默认)box-sizing: border-box盒子大小为 width
图片模糊
filter CSS属性将模糊或者颜色偏移等效果应用于元素
/*例如 filter:blur(5px) blur 模糊处理，数值越大越模糊*/
filter: 函数();
CSS3 计算属性
calc() 此 CSS 函数可以让在声明 CSS 属性值时执行一些简单的计算
width: calc(100%-80px);
括号里面可以使用 +、-、*和/来计算
CSS3 过渡
过渡动画是从一个状态逐渐过渡到另外一个状态
格式：transition: 要过渡的属性 花费的时间 运动曲线 何时开始;
- 要过渡的属性
- 想要变化的 css 属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个 all 就可以
- 花费时间
- 单位是秒，必须写单位，比如
0.5s
- 单位是秒，必须写单位，比如
- 运动曲线
- 默认是ease，逐渐慢下来，可以省略
- linear 匀速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
- 何时开始
- 单位是秒，必须写单位，可以设置延迟触发时间，默认是 0s
如果给同一个元素同时加多个过渡，按照如下格式写：
transition: 要过渡的属性 花费的时间 运动曲线 何时开始, 要过渡的属性 花费的时间 运动曲线 何时开始;
2D 转换
2D 移动
2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似于定位
语法：
transform: translate(x, y)
/*或者分开写：*/
transfrom: translateX(n);
transfrom: translateY(n);
- translate 的优点：不会影响到其他元素的位置
- translate 中的百分比单位是相对于自身的
- 对行内标签没有效果
2D 旋转
语法：
transform: rotate(度数); /*单位为 deg*/
设置变换中心点
语法：
transform-origin: x y;
x 和 y 可以设置像素或者方位名次（top、bottom、left、right、center）
2D 缩放
语法：
transform: scale(x, y);
- transform:scale(1,1)：宽和高都放大一倍，相当于没有缩放
- transform:scale(2)：宽和高都放大两倍
- transform:scale(0.5) 宽和高都缩小到原来的一半
不会影响其他的盒子，并且可以设置变换中心点
transform-origin: x y;
2D 转换综合写法
格式：
transform: translate() rorate() scale(); 等
正确的书写顺序是：先旋转，旋转会改变坐标轴的方向
如果同时有位移和其他属性的时候，要将位移放到最前面
动画
制作动画分为两步：
- 定义动画
- 调用动画
/* 定义动画 */
@keyframes animationName {
0% {
transform: translateX(0);
}
100% {
transform: translateX(500px);
}
}
/* 使用动画 */
.animation {
animation-name: animationName; /*动画的名称*/
animation-duration: 2s; /*动画的持续时间*/
}
动画的常见属性:
- animation-name 规定 @keyframes 动画的名称
- animation-duration 规定动画完成一个周期所话费的秒或毫秒 默认是 0
- animation-timing-function 规定动画的速度曲线 默认是
ease - animation-delay 规定动画何时开始
- animation-iteration-count 规定动画的播放次数，默认是 1，还有 infinite
- animation-direction 规定动画是否在下一周期逆向播放 默认是 normal，alternate 为逆播放
- animation-play-state 规定动画是否正在运行或暂停，默认是 running 还有 pause
- animation-fill-mode 规定动画结束后的状态，保持 forwards 回到动画开始 backwards
动画简化写法
上面的属性除了 animation-play-state 属性外，都可以一次性写完
格式：
animation: 动画名称 动画持续时间 运动曲线 何时开始 是否反方向 动画开始或结束的状态;
3D 转换
3D 位移
语法：
transform: translateX();
transform: translateY();
transform: translateZ();
/*上面三条可以简写成：*/
transform: translate3d(x, y, z); /*x y z分别指要移动的轴的方向的距离*/
3D 旋转
语法：
- transform: rotateX(45deg) 沿着 x 轴旋转
- transform: rotateY(45deg) 沿着 y 轴旋转
- transform: rotateZ(45deg) 沿着 z 轴旋转
- transform: rotate3d(x,y,z, 45deg) 沿着自定义轴旋转轴旋转
透视
透视写在被观察元素的父盒子上面
语法：
prespective: px;
3D 呈现
transform-style 用来控制子元素是否开启三维立体环境
transform-style: flat 元素不开启 3d 立体空间，默认的
transform-style: preserve-3d 子元素开启立体空间
代码写给父级，但是影响的是子盒子
浏览器私有前缀
为了兼容老版本的写法，比较新版的浏览器无需添加
私有前缀
- -moz-: 代表 firefox 浏览器私有属性
- -ms-: 代表 ie 浏览器私有属性
- -webkit-: 代表 safari、chrome 浏览器私有属性
- -o-: 代表 opera 私有属性