CSS3

属性选择器

元素 [属性]{} 选择指定元素中拥有该属性的元素 如:button [disable]{};

属性选择器和伪类选择器与类选择器权重一致

<style>
      button {
        cursor: pointer;
      }

      button[disabled] {
        cursor: default;
      }
    </style>

<button>提交</button>
    <button>提交</button>
    <button disabled="disabled">提交</button>
    <button disabled="disabled">提交</button>

• 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 元素

结构伪类选择器

选择该元素中 指定元素的第几个 如：FU E:nth-child (1){}

• E:first-child 匹配父元素中第一个子元素 E 可以省略 E 元素表示 all 元素 如:span:first-child

• E:last-child 匹配最后一个 E 元素

• E:nth-child (n) 匹配第 n 个 E 元素

  • n 可以是数字
  • n 可以是关键字 如 even 偶数 odd 奇数
  • n 可以公式，从 0 开始计算 如：2n 偶数 从 0 2 4 6, n+5 从 5 6 7 8.-n+5 从 4 3 2 1
  • 第 0 个元素和超出元素的个数会被忽略， 元素从 1 开始
  • 如匹配指定元素且父类元素中第 n 孩子并不是元素则不会匹配选择到

• nth-last-child ()：从最后一个子元素开始往前计数

  • :nth-last-child (1)，代表倒数第一个子元素
  • :nth-last-child (-n + 2)，代表最后 2 个子元素

• E:first-of-type 选择指定类型的第一个 如:span:first-of-type

• E:last-of-type 选择指定类型的最后一个

• E:nth-of-type (n) 与子类选择一致，不同点是:nth-of-type () 计数时只计算同种类型的元素

• &:not (:last-child) 排除最后一个子类

• :only-child，是父元素中唯一的子元素

• :only-of-type，是父元素中唯一的这种类型的子元素

下面的伪类偶尔会使用:

• :root，根元素，就是 HTML 元素
• :empty 代表里面完全空白的元素

伪类选择器

• ::before 在元素内部的前面插入内容
• ::after 在元素内部的后面插入内容
• 都必须拥有 content 属性
• 会在内容的前或后，创建一个看不见的元素，但是属于行内元素
• 伪元素和标签选择器一样，权重为 1

否定伪类

:not (x) 表示除 x 以外的元素

• x 是一个简单选择器， 元素选择器、通用选择器、属性选择器、类选择器、id 选择器、伪类（除否定伪类）

2D 转换

2D 移动

使用 transform: 关键字， 不会影响到其他元素的位置，对行内标签没有效果，如果使用百分百单位是相对于自身元素的尺寸 (50% 是自身尺寸的一半).

• translate (x,y); 在元素原来的位置移动相对应的 x y 坐标 如:transform:translate (x,y);
• translateX(n);
• translateY(n);
• 让盒子重置居中方法：首先子绝父相，left:50%, 然回自身大小的一半，也就是 translate 中的 transform:translate (50%,0);

2D 旋转

transform:rotate (度数);

度数单位为 deg 如:rotate (45deg)

角度为正时顺时针，逆时为逆时针

transform-origin:x y ; 默认的旋转点为元素的中心点 (50%,50%) , 支持方位名词 top、bottom、left、right、center

2D 缩放

transform:scale(x,y);

x,y 指的是原来宽度 / 高度倍数，默认为 1 倍；

如果宽度和高度变化的倍数一样可以简写为 x 如:transform:scale (2);

缩放不会影响其他盒子

同样拥有中心点

transform-origin:x y ; 默认的缩放点为元素的中心点 (50%,50%) , 支持方位名词 top、bottom、left、right、center

2D 倾斜

transform:skew(deg,deg);

一个值时，表示 x 轴上的倾斜，二个值时，表示 x 轴和 y 轴上的倾斜

旋转的原点受 transform-origin 的影响

缩写

transform:translate() rotate() scale()

强调顺序关系，位移总是在最前

动画

使用 keyframes 定义动画

@keyframes 动画自定义名称 {
    /*开始状态*/
	0% {
		width:100px;
	}
    /*结束状态*/
	100% {
		width:200px;
	}
}

/*调用动画*/
div {
    width:200px;
    height:200px;
    
    animation-name:动画名称;
  
    animation-duration:持续时间;
        
}

动画序列

动画有多个过程从 0%-100%, 也可以使用 form,to 代替 0 和 100

我们可以定义不同百分百的过程的动画一个动画中有多个过渡动画

如：0% 一个 25% 一个 75% 100%

动画常用属性

• @keyframes: 规定动画

• animation-name: 动画名称，指定执行哪一个关键帧动画

• animation-duration: 指定动画的持续时间

• animation-timing-function: 动画的速度曲线 默认是 ease

  • linear 匀速
  • ease 默认
  • ease-in 动画由低速开始
  • ease-out 低速结束
  • ease-in-out 以低俗开始和结束
  • steps () 指定了时间函数中的间隔数量 (步长), 切蛋糕把整个动画切分为若干份

• animation-delay: 规定动画何时开始 默认是 0 单位为 s /ms

• animation-iteration-count: 动画播放次数 默认为 1,infinite 为无限循环

• animation-direction: 规定动画是否在下一周期逆向播放 默认为 normal, alternate 是逆播放

• animation-play-state: 规定动画播放或者暂停 默认为 running 暂停为 pause

• animation-fill-mode: 规定动画结束后状态 保持为 forwards 回到起始位置为 backwards

  • none：回到没有执行动画的位置
  • forwards：动画最后一帧的位置
  • backwards：动画第一帧的位置

• animation: 动画的简写

  • animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束状态
  • 可以使用多个动画，用逗号隔开.

3D 转换

3D 移动

• transform:translateX (x); 往 x 轴移动
• translateY 往 y 移动
• translateZ 往 Z 移动
• transform:translate3d (x,y,z) 指定移动 xyz

透视 perspective

写在被 3D 化元素的父盒子里

perspective:500px;

必须要有透视才能看到 z 轴变化的效果

3D 旋转 rotate3d

• transform:rotateX (45deg); 沿 x 轴正向旋转 45 度
• transform:rotateY (45deg); 沿 y 轴正向旋转 45 度
• transform:rotateZ (45deg); 沿 z 轴正向旋转 45 度
• transform:rotate3d (x,y,z,45deg); 沿自定义轴 旋转 45 度 1 为标记此轴旋转 默认为 0

3D 呈现 transform-style

控制子元素是否开启三维立体环境，如果不开启 父盒子旋转之后 子盒子不会保留 3d 效果

transform:flat 默认子元素不开启 3d 立体空间

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

写在父级元素上，但影响是子元素

浏览器私有前缀

-moz-: firefox 私有前缀

-ms-: ie 浏览器

-webkit-: Safari 和 chrome

-o- : Opera

如: -ms-border:1px solid #ccc;

背景线性渐变

linear-gradient 创建一个表示两种或多种颜色线性渐变的图片；

background:linear-gradient (起始方向，颜色 1, 颜色 2,....);

• 起始方向为方位名词或度数 默认值为 top
• 可以指定左上角 用空格隔开 如: top left, 颜色 1, 颜色 2
• 要加上浏览器的私有前缀 如:background:-webkit-linear-gradient (left,red,blue);

css 函数

CSS 函数通常可以帮助我们更加灵活的来编写样式的值；

• var: 使用 CSS 定义的变量；
• calc: 计算 CSS 值，通常用于计算元素的大小或位置；
• blur: 毛玻璃 (高斯模糊) 效果；
• gradient：颜色渐变函数；

var

CSS 中可以自定义属性，属性名需要以两个减号（--）开始；属性值则可以是任何有效的 CSS 值

我们可以通过 var 函数来使用

规则集定义的选择器，是自定义属性的可见作用域 (只在选择器内部有效)，所以推荐将自定义属性定义在 html 中，也可以使用 :root 选择器；

calc

calc () 函数允许在声明 CSS 属性值时执行一些计算。计算支持加减乘除的运算；+ 和 - 运算符的两边必须要有空白字

blur

blur () 函数将高斯模糊应用于输出图片或者元素；

• blur(radius)
• radius, 模糊的半径，用于定义高斯函数的偏差值，偏差值越大，图片越模糊；

通常会和两个属性一起使用：

• filter: 将模糊或颜色偏移等图形效果应用于元素；
• backdrop-filter: 为元素后面的区域添加模糊或者其他效果；

gradient

<gradient> 是一种 < image>CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变。

• CSS 的 <image> 数据类型描述的是 2D 图形；
• 比如 background-image、list-style-image、border-image、content 等；
• <image> 常见的方式是通过 url 来引入一个图片资源；
• 它也可以通过 CSS 的 <gradient> 函数来设置颜色的渐变；

<gradient> 常见的函数实现有下面几种：

• linear-gradient ()：创建一个表示两种或多种颜色线性渐变的图片；
• radial-gradient ()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
• repeating-linear-gradient ()：创建一个由重复线性渐变组成的 < image>；
• repeating-radial-gradient ()：创建一个重复的原点触发渐变组成的 < image>；