CSS3-选择器、2D转换，动画，3D转换，浏览器私有前缀

主要内容：

• CSS3 属性选择器
• CSS3 结构伪类选择器
• CSS3 伪元素选择器
• CSS3 2D转换
• CSS3 动画
• CSS3 3D转换
• 浏览器私有前缀

1、现状

浏览器支持程度差，须要添加私有前缀

2、 CSS3 属性选择器

类选择器、属性选择器、伪类选择器，权重为 10
代码演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

3、CSS3 结构伪类选择器

一、属性说明

代码演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

二、nth-child参数说明

• 注意：本质上就是选中第几个子元素
• n 能够是数字、关键字、公式
• n 若是是数字，就是选中第几个
• 常见的关键字有 even 偶数、odd 奇数
• 常见的公式以下(若是 n 是公式，则从 0 开始计算)
• 可是第 0 个元素或者超出了元素的个数会被忽略

代码演示

<style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始日后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

三、nth-child 和 nt-of-type 的区别

• nth-child 选择父元素里面的第几个子元素，不论是第几个类型
• nt-of-type 选择指定类型的元素

代码演示

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

四、总结

• 结构伪类选择器就是选择第n个
• Nth-child从全部子级开始算的，可能不是同一种类型
• Nth-of-type 是指定同一种类型的子级，好比 ul li:nth-of-type(2) 是选择第2个li
• 关于nth-child（n） 咱们要知道n从0开始计算的，要记住经常使用的公式
• 若是是无无序列表，咱们确定用 nth-child 更多
• 类选择器、属性选择器、伪类选择器，权重为 10

4、伪元素选择器

一、伪元素选择器

• before 和 after 必须有 content 属性
• before 在内容的前面，after 在内容的后面
• before 和 after 建立一个元素，可是属于行内元素。
• 由于在 dom 里面看不见刚才建立的元素，因此咱们称为伪元素
• 伪元素和标签选择器同样，权重为 1

代码演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

二、CSS选择器及权重复习

• 内联样式 1000
• ID选择器 100
• 类选择权，属性选择器 ，伪类选择器 10
• 标签选择器，伪元素选择器 1

三、清楚浮动的办法

• 父元素添加 overfloat:hidden

  • 优势：代码简洁
  • 缺点：内容增多的时候容易形成不会自动换行致使内容被隐藏掉，没法显示要溢出的元素

• 使用::after伪元素清除浮动

  • 优势：符合闭合浮动思想，结构语义化正确
  • 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

.box::after{
    content:"";
    display:block;
    clear:both;
    visibility:hidden;
}

<div class=box>
    <div class\="big"\>big</div\>
    <div class\="small"\>small</div\>
    <!--<div class="clear">额外标签法</div>-->
</div>

• zoom:1 : ie6清除浮动的方式 号只有IE6-IE7执行，其余浏览器不执行,通常与其余组合使用

.box{
    *zoom:1;

}

• 使用before和after双伪元素清除浮动

.box:after,.box:before{
        content: "";
        display: table;
    }
.box:after{
        clear: both;
    }
.box{
     *zoom: 1;
    }

5、CSS 2D转换

转换（transform）是CSS3中具备颠覆性的特征之一，能够实现元素的位移、旋转、变形、缩放。

• 缩放：scale
• 移动：translate
• 旋转：rotate
• 倾斜：skew

一、2D 移动 translate

2D移动是2D转换里面的一种功能，能够改变元素在页面中的位置，相似定位。

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

• 定义 2D 转换，沿着 X 和 Y 轴移动元素
• translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
• translate相似定位，不会影响到其余元素的位置
• 对行内标签没有效果

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}

二、2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(angle)

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点
• 设置旋转中心点:transform-origin: x y;//(left,right,top,bottom,center)

img:hover {
  transform: rotate(360deg)
}

三、2D 转换之缩放scale

缩放，顾名思义，能够放大和缩小。 只要给元素添加上了这个属性就能控制它放大仍是缩小。

transform:scale(x,y);

• transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
• transform:scale(2,2) ：宽和高都放大了2倍
• transform:scale(2) ：只写一个参数，第二个参数则和第一个参数同样，至关于 scale(2,2)
• transform:scale(0.5,0.5)：缩小

四、顺序

• 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影转换的效果。
• 先旋转会改变坐标轴方向
• 但咱们同时有位置或者其余属性的时候，要将位移放到最前面

6、CSS动画

1. 什么是动画

*   动画是 `CSS3` 中最具颠覆性的特征之一，可经过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

2. 动画的基本使用

*   先定义动画
*   在调用定义好的动画

3. 语法格式(定义动画)

@keyframes 动画名称 {  
     0% {  
     width: 100px;  
     }  
     100% {  
     width: 200px  
     }  
    }

4.语法格式(使用动画)

div {  
    /\* 调用动画 \*/  
    animation-name: 动画名称;  
    /\* 持续时间 \*/  
    animation-duration: 持续时间；  
   }

5. 动画序列

*   0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
*   在 @keyframs 中规定某项 CSS 样式，就由建立当前样式逐渐改成新样式的动画效果 
*   动画是使元素从一个样式逐渐变化为另外一个样式的效果，能够改变任意多的样式任意多的次数  
*   用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%

6. 代码演示

<style\>  
     div {  
     width: 100px;  
     height: 100px;  
     background-color: aquamarine;  
     animation-name: move;  
     animation-duration: 0.5s;  
     }  
    ​  
     @keyframes move{  
     0% {  
     transform: translate(0px)  
     }  
     100% {  
     transform: translate(500px, 0)  
     }  
     }  
     </style\>

7. 常见的属性

8. 代码演示

div {  
     width: 100px;  
     height: 100px;  
     background-color: aquamarine;  
     /\* 动画名称 \*/  
     animation-name: move;  
     /\* 动画花费时长 \*/  
     animation-duration: 2s;  
     /\* 动画速度曲线 \*/  
     animation-timing-function: ease-in-out;  
     /\* 动画等待多长时间执行 \*/  
     animation-delay: 2s;  
     /\* 规定动画播放次数 infinite: 无限循环 \*/  
     animation-iteration-count: infinite;  
     /\* 是否逆行播放 \*/  
     animation-direction: alternate;  
     /\* 动画结束以后的状态 \*/  
     animation-fill-mode: forwards;  
    }  
    ​  
    div:hover {  
     /\* 规定动画是否暂停或者播放 \*/  
     animation-play-state: paused;  
    }

9. 动画简写方式

/\* animation: 动画名称 持续时间 运动曲线 什么时候开始 播放次数 是否反方向 起始与结束状态 \*/  
animation: name duration timing-function delay iteration-count direction fill-mode

10. 知识要点

• 简写属性里面不包含 animation-paly-state
• 暂停动画 animation-paly-state: paused; 常常和鼠标通过等其余配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

animation: move 2s linear 1s infinite alternate forwards;

11. 速度曲线细节

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

6、CSS 3D转换

一、 3D 转换特色

• 近大远小
• 物体和面遮挡不可见

2. 三维坐标系

• x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值
• y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值
• z 轴：垂直屏幕 -- **注意：往外边的是正值，往里面的是负值

三、3D 转换

（1）3D 转换知识要点

• 3D 位移：translate3d(x, y, z)
• 3D 旋转：rotate3d(x, y, z)
• 透视：perspctive
• 3D呈现 transfrom-style

（2） 3D 移动 translate3d

• 3D 移动就是在 2D 移动的基础上多加了一个能够移动的方向，就是 z 轴方向
• transform: translateX(100px)：仅仅是在 x 轴上移动
• transform: translateY(100px)：仅仅是在 y 轴上移
• transform: translateZ(100px)：仅仅是在 z 轴上移动

• transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

  • 注意：x, y, z 对应的值不能省略，不须要填写用 0 进行填充

（3）. 语法

transform: translate3d(x, y, z)

(4). 代码演示

transform: translate3d(100px, 100px, 100px)  
    /\* 注意：x, y, z 对应的值不能省略，不须要填写用 0 进行填充 \*/  
    transform: translate3d(100px, 100px, 0)

二、透视 perspective

(1)讲解

• 若是想要网页产生 3D 效果须要透视(理解成 3D 物体投影的 2D 平面上)
• 实际上模仿人类的视觉位置，可视为安排一直眼睛去看
• 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视的单位是像素

(2) 要点

• 透视须要写在被视察元素的父盒子上面

• 注意下方图片

  • d：就是视距，视距就是指人的眼睛到屏幕的距离
  • z：就是 z 轴，z 轴越大(正值)，咱们看到的物体就越大

(3) 代码演示

body {  
     perspective: 1000px;  
    }

三、 translateZ

(1) translateZ 与 perspecitve 的区别

• perspecitve 给父级进行设置，translateZ 给 子元素进行设置不一样的大小

四、3D 旋转rotateX

3D 旋转指可让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

（1） 语法

• transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
• transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
• transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
• transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

div {  
     perspective: 300px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotateX(\-45deg)  
    }

(2) 左手准则

• 左手的手拇指指向 x 轴的正方向
• 其他手指的弯曲方向就是该元素沿着 x 轴旋转的方向

四、3D 旋转 rotateY

div {  
     perspective: 500px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotateY(180deg)  
    }

• 左手准则

  • 左手的拇指指向 y 轴的正方向
  • 其他的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

五、 3D 旋转 rotateZ

div {  
     perspective: 500px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotateZ(180deg)  
    }

（1） rotate3d

• transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

• x, y, z 表示旋转轴的矢量，是标识你是否但愿沿着该轴进行旋转，最后一个标识旋转的角度

  • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
  • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

div {  
     perspective: 500px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotate3d(1, 1, 0, 180deg)  
    }

六、3D 呈现 transform-style

• transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style: flat 表明子元素不开启 3D 立体空间，默认的
  • transform-style: preserve-3d 子元素开启立体空间
  • 代码写给父级，可是影响的是子盒子

七、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

• 私有前缀

  • -moz-：表明 firefox 浏览器私有属性
  • -ms-：表明 ie 浏览器私有属性
  • -webkit-：表明 safari、chrome 私有属性
  • -o-：表明 Opera 私有属性
• 提倡的写法

\-moz-border-radius: 10px;
\-webkit-border-radius: 10px;
\-o-border-radius: 10px;
border-radius: 10px;