1. CSS3

2. 属性选择器

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

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

  1. <style>
  2.       button {
  3.         cursor: pointer;
  4.       }
  6.       button[disabled] {
  7.         cursor: default;
  8.       }
  9.     </style>
  11. <button>提交</button>
  12.     <button>提交</button>
  13.     <button disabled="disabled">提交</button>
  14.     <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元素

3. 结构伪类选择器

选择该元素中 指定元素的第几个 如: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孩子并不是元素则不会匹配选择到
  • E:first-of-type 选择指定类型的第一个 如:span:first-of-type
  • E:last-of-type 选择指定类型的最后一个
  • E:nth-of-type(n) 与子类选择一致
  • &:not(:last-child) 排除最后一个子类

4. 伪类选择器

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

5. 2D转换

5.1. 2D移动

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

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

5.2. 2D旋转

transform:rotate(度数);

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

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

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

5.3. 2D缩放

transform:scale(x,y);

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

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

缩放不会影响其他盒子

同样拥有中心点

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

5.4. 缩写

transform:translate() rotate() scale()

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

6. 动画

使用keyframes定义动画

  1. @keyframes 动画自定义名称 {
  2.     /*开始状态*/
  3.     0% {
  4.         width:100px;
  5.     }
  6.     /*结束状态*/
  7.     100% {
  8.         width:200px;
  9.     }
  10. }
  12. /*调用动画*/
  13. div {
  14.     width:200px;
  15.     height:200px;
  17.     animation-name:动画名称;
  19.     animation-duration:持续时间;
  21. }

6.1. 动画序列

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

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

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

6.2. 动画常用属性

  • @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

  • animation: 动画的简写

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

7. 3D转换

7.1. 3D移动

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

7.2. 透视 perspective

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

perspective:500px;

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

7.3. 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

7.4. 3D呈现 transform-style

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

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

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

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

8. 浏览器私有前缀

-moz-: firefox 私有前缀

-ms-: ie浏览器

-webkit-: Safari 和chrome

-o- : Opera

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

9. 背景线性渐变

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

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