一、CSS3

CSS3现状

在CSS2的基础上新增（扩展）样式
移动端支持优于PC端
不断改进中
应用相对广泛

二、CSS3选择器

2.1 属性选择器(权重是10）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }
        /* 属性选择器使用方法 */
        /*选择的是：既是button又有disabled这个属性的元素*/
        button[disabled] {
            cursor: default;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</button>

</body>

2.2 结构伪类选择器（权重10）

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` 选择指定类型的元素，选择某个特定标签类型里面的第几个元素

    <div>
        <p>我是p</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>

div span:nth-child(1){
            background-color: pink;
        }

上面这个选择器是无法选择出任何元素的，因为这个选择器要求选出标签是span并且是 div(父元素) 的第一个孩子，这里面是没有满足这个两个条件的元素的

div span:nth-of-type(1) {
            background-color: purple;
        }

上面这个选择器可以选出第一个sapn元素，他选出的是满足标签是span，并且是从span这个类型的标签里面选择的第一个元素

2.3 伪元素选择器

伪类选择器是一个冒号，伪元素选择器是两个冒号

伪类选择器注意事项

- `before` 和 `after` 必须有 `content` 属性

- `before` 在内容前面，after 在内容后面

- `before` 和 `after` 创建的是一个元素，但是属于行内元素

- 创建出来的元素在 `Dom` 中查找不到，所以称为伪元素

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

伪元素字体图标

span {
            font-family: 'icomoon';
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
        div,
        p {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
        
        p::after {
            content: "\ea50";
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icommon';
        }

    <div>
        <span></span>
    </div>
    <p></p>

上述代码的作用是，直接使用伪元素选择器在p标签里面创建了一个字体图标，不用像第一种方式创建一个div，里面再放一个span

此外使用字体图标的方式有两种：

一是复制里面的小图标放在标签里面

而是使用前面的代码放到伪元素里面的content中，注意前面要加上转义符\

三、2D转换

转换（transform）是CSS3中最具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放效果

转换（transform）：

移动：translate
旋转：rotate
缩放：scale

3.1 二维坐标系

3.2 移动translate

改变元素在页面中的位置，类似定位

3.2.1 语法

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

移动盒子的位置的方式：

定位
盒子的外边距
2d转换移动

3.2.2 重点

-`2D` 的移动主要是指水平、垂直方向上的移动

- `translate` 最大的优点就是不影响其他元素的位置（这是定位和外边距不能实现的）

- `translate` 中的100%单位，是相对于盒子本身的宽度和高度来进行计算的

- 行内标签没有效果

让盒子水平垂直居中

 div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            transform: translate(-50%, -50%);
        }

<div>
    <p></p>
</div>

/*盒子往上走自己高度的一半，往左走盒子宽度的一半*/
transform: translate(-50%, -50%);

3.3 旋转rotate

3.3.1 语法

transform:rotate(度数）
transform:rotate(45deg) //角度为正值顺时针旋转，为负值时逆时针旋转

3.3.2 三角

以前是通过字体图标的方式放一个下三角，现在通过旋转的属性实现

<div></div>

        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            /* 给出一个右边框和一个下边框，再旋转45度即可 */
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all .2s;
        }
        /* 鼠标经过div，里面的after伪元素进行旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }

3.3.3 设置元素旋转中心点(transform-origin)

transform-origin: x y;

- 注意后面的参数 x 和 y 用空格隔开

- x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 `center` `center`

- 还可以给 x y 设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center`)

3.4 缩放scale

transform:scale(x,y);

- 注意，x 与 y 之间使用逗号进行分隔

- `transform: scale(1, 1)`: 宽高都放大一倍，相当于没有放大

- `transform: scale(2, 2)`: 宽和高都放大了二倍

- `transform: scale(2)`: 如果只写了一个参数，第二个参数就和第一个参数一致

- `transform:scale(0.5, 0.5)`: 缩小

- `scale` 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

3.4.1 图片放大案例

<div><a href=""></a><img src="media/scale.jpg" alt=""></div>
<div><a href=""></a><img src="media/scale.jpg" alt=""></div>
<div><a href=""></a><img src="media/scale.jpg" alt=""></div>

        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        div img:hover {
            transform: scale(1.1);
        }

3.4.2 分页按钮案例

实现鼠标放在页码上，页码放大

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>

3.5 2D转换综合写法

1. 知识要点

- 同时使用多个转换，其格式为 `transform: translate() rotate() scale()`

- 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

- 但我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {
     transform: translate(200px, 0) rotate(360deg) scale(1.2)
   }

四、动画

4.1 什么是动画

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

4.2 动画的基本使用

- 先定义动画

- 在调用定义好的动画

4.3 语法格式(定义动画)

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

4.4 语法格式(使用动画)

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

4.5 动画序列

- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

- 用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%

百分比是时间的划分，比如总时间为10s，25%就是2.5s

4.6 动画属性

简写形式：

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

- 简写属性里面不包含 `animation-paly-state`

- 暂停动画 `animation-paly-state: paused`; 经常和鼠标经过等其他配合使用

- 要想动画走回来，而不是直接调回来：`animation-direction: alternate`

- 盒子动画结束后，停在结束位置：`animation-fill-mode: forwards`

4.7 速度曲线细节

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

奔跑的熊大

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 元素可以添加多个动画 用逗号分割 */
            animation: bear 1s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translate(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

元素可以添加多个动画，用逗号隔开即可

五、3D转换

5.1 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 进行填充**

5.2 透视perspective

- 如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)

- 实际上模仿人类的视觉位置，可视为安排一直眼睛去看

- 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离

- 距离视觉点越近的在电脑平面成像越大，越远成像越小

- 透视的单位是像素

- **透视需要写在被视察元素的父盒子上面**

- d：就是视距，视距就是指人的眼睛到屏幕的距离

- z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

body {
     perspective: 1000px;
   }

5.3 translatez

1. `translateZ` 与 `perspecitve` 的区别

- `perspecitve` 给父级进行设置，`translateZ` 给子元素进行设置不同的大小

5.4 3D旋转 rotate3d

1. 语法

- `transform: rotateX(45deg)` -- 沿着 x 轴正方向旋转 45 度

- `transform: rotateY(45deg)` -- 沿着 y 轴正方向旋转 45 度

- `transform: rotateZ(45deg)` -- 沿着 z 轴正方向旋转 45 度

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

`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

5.5 3D呈现 transform-style

1. `transform-style`

- ☆☆☆☆☆

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

- `transform-style: flat` 代表子元素不开启 `3D` 立体空间，默认的

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

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

5.6 案例

3D导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            margin: 100px;
        }
        
        ul li {
            width: 120px;
            height: 35px;
            list-style: none;
            /* 之后需要给box也添加透视，因此没有把这个透视属性加在box上面，反而加在了li上 */
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .5s;
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
        
        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .front {
            background-color: pink;
            z-index: 1;
            /* 我们先把紫色盒子沿着x轴旋转90度，
            之后并没有把紫色盒子向后移动宽度的一半，而是把粉色盒子向前移动了宽度的一半 */
            /* 这样才能让整个盒子立方体沿着中心点旋转，否则盒子将会沿着 */
            transform: translateZ(17.5px);
        }
        
        .bottom {
            background-color: purple;
            /* 必须先写移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">哼唧哼唧</div>
                <div class="bottom">哼唧哼唧</div>
            </div>
        </li>
    </ul>
</body>

</html>

旋转木马

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 6s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        
        section:hover {
            /* 鼠标放上去暂停旋转 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: translateZ(300px);
        }
        
        section div:nth-child(2) {
            /* 先旋转好了再移动 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            /* 先旋转好了再移动 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            /* 先旋转好了再移动 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            /* 先旋转好了再移动 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            /* 先旋转好了再移动 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

六、浏览器私有前缀

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

七、背景线性渐变

背景渐变必须添加浏览器私有前缀

起始方向可以是：方位名词或者度数，如果省略默认就是top

CSS3