02 css3

# 1. css3选择器 #
## 1.1 css3属性选择器 ##

    选择符            简介
    E[att]            选择具有att属性的元素
    E[att= "val"]    选择具有att属性且属性值等于val的E元素
    E[att^="val"]    匹配具有att属性、且值以val开头的E元素
    E[att$="val"]    匹配具有at属性、且值以val结尾的E元素
    E[att*="val"]    匹配具有att属性、且值中含有val的E元

类选择器、属性选择器、伪类选择器  权重为10


## 1.2 css3结构伪类选择器 ##

用法

    选择符            简介
    E:first-child    匹配父元素中的第一个子元素E
    E:last-child    匹配父元素中最后一个E元素
    E:nth-child(n)    匹配父元素中的第n个子元素E
    E:first-of-type    指定类型E的第一个
    E:last-of-type    指定类型E的最后一个
    E:nth-of-type(n)指定类型E的第n个
代码演示

    

/* 只选择第一个子标签元素 */
    
    ul li:first-child {
        background-color: pink;
    }
    /* 匹配最后一个子元素 */
    
    ul li:last-child {
        background-color: skyblue;
    }
    /* 匹配第n个子元素 */
    
    ul li:nth-child(2) {
        background-color: black;
    }
    /* 匹配偶数元素 */
    /* n可以是关键词  even是偶数 odd基数*/
    
    ul li:nth-child(even) {
        background-color: aqua;
    }
    /* n可以是公式，但是n从0开始计算 */
    
    ul li:nth-child(2n+1) {
        background-color: yellowgreen;
    }
    /* of - type 指定类型的元素 */
    
    ul span:first-of-type {
        background-color: violet;
    }
    
    ul span:last-of-type {
        background-color: violet;
    }
    
    ul span:nth-child(2n) {
        background-color: gold;
    }

nth-child:

- 但是第 0 个元素或者超出了元素的个数会被忽略
-  选择父元素里面的第几个子元素，不管是第几个类型
-  本质上就是选中第几个子元素


## 1.3伪元素选择器 ##

    选择符        介绍
    ::before     在元素内部的前面插入内容
    ::after        在元素内部的后面插入内容

必须都有content属性

before 和 after 创建一个元素，但是属于行内元素，行内元素无大小

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

# 2.  2D转换 ##
## 2.1 二维坐标系 ##

x轴 水平向右
y轴 垂直向下 

1.  `2D` 转换

   - `2D` 转换是改变标签在二维平面上的位置和形状

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

2.  `translate` 语法
    
       - x 就是 x 轴上水平移动
       - y 就是 y 轴上水平移动
    

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

重点

- 沿着xy轴移动元素
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素translate:(50%,50%);
- 对行内标签没有效果

## 2.3 2D旋转 ##

1. rotate 旋转

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

2.  `rotate` 语法

   ```css
   /* 单位是：deg */
   transform: rotate(度数) 
   ```

3.  重点知识点
   - `rotate` 里面跟度数，单位是 `deg`
   -  角度为正时，顺时针，角度为负时，逆时针
   - 默认旋转的中心点是元素的中心点

4.  代码演示

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

设置旋转中心点
    
     

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 跟方位名词 
            也可以是百分比  默认是50% 50% 等价于center center */
            /* transform-origin: left bottom;*/
            /* 可以是px */
            transform-origin: 50px 50px;
        }
        
    div:hover {
        transform: rotate(360deg);
    }

## 2.4 2D转换之缩放scale ##

1. `scale` 的作用

   - 用来控制元素的放大与缩小

2. 语法

   ```css
   transform: scale(x, y)
   ```

3. 知识要点
   - 注意，x 与 y 之间使用逗号进行分隔
   - `transform: scale(1, 1)`: 宽高都放大一倍，相当于没有放大
   - `transform: scale(2, 2)`: 宽和高都放大了二倍
   - `transform: scale(2)`: 如果只写了一个参数，第二个参数就和第一个参数一致
   - `transform:scale(0.5, 0.5)`: 缩小
   - `scale` 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

4. 代码演示

    ```css
        

div:hover {
           /* 注意，数字是倍数的含义，所以不需要加单位 */
           /* transform: scale(2, 2) */
       
           /* 实现等比缩放，同时修改宽与高 */
           /* transform: scale(2) */
       
           /* 小于 1 就等于缩放*/
           transform: scale(0.5, 0.5)
       }

    ```

## 2.5 2D转换综合写法 ##



1.  知识要点

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


css


  

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }
        
    div:hover {
        /* 顺序影响效果 */
        transform: translate(50px, 50px) rotate(180deg) scale(1.2);
    }

# 3.动画 #
## 3.1 动画基本使用 ##

1. 什么是动画

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

2. 动画的基本使用
   - 先定义动画
   - 在调用定义好的动画

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

   ```css
    

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

   ```


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

   ```

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

   ```


5. 动画序列

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

6. 代码演示

css


   

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

## 3.2 动画序列 ##

根据节点（实际动画完成这步所需时间）来设置 动画使用顺序 
如 25% 50% 75%等 

## 3.3 动画常用属性 ##


    属性                            描述
    @keyframes                    规定动画。
    animation                    所有动画属性的简写属性，除了animation-play-state属性。
    animation-name                规定@keyframes动画的名称。( 必须的)
    animation-duration            规定动画完成一个周期所花费的秒或毫秒 ,默认是0。 (必须的 )
    animation-timing-function    规定动画的速度曲线，默认是"ease"
    animation-delay                规定动画何时开始，默认是0。animation-iteration-count    规定动画被播放的次数，默认是1，还有infinite
    animation-direction            规定动画是否在下一-周期逆向播放，默认是"normal ",alternate逆播放
    animation-play-state        规定动画是否正在运行或暂停。默认是"running" ，还有"pause"。
    animation-fill-mode            规定动画结束后状态，保持forwards回到起始backwards


    /* 简写属性 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始和结束 */
    animation: move 3s ease-in 1s infinite alternate forwards;

简写属性里不包含 animation-play-state 
暂停动画 ：animation-play-state:paused;  和鼠标经过和其他配合使用
想要动画走回来而不是调回来 animation-direction ：alternate


    值            描述
    linear        动画从头到尾的速度是相同的。匀速
    ease        默认。动画以低速开始，然后加快,在结束前变慢。
    ease-in        动画以低速开始。
    ease-out    动画以低速结束。
    ease-in-out    动画以低速开始和结束。
    steps()        (指定了时间函数中的间隔数量(步长)

# 3. 3D转换 #

## 3.1 三维坐标系 ##

- x轴：水平向右     右边正值
- y轴：垂直向下    下面正值
- z轴：垂直屏幕    往外面是正值 

## 3.2 3D位移 translate3d(x,y,z) ##


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

 css
        
     

div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* transform: translateX(100px); */
        /* transform: translateY(100px); */
        /* 沿着z轴移动 后边单位一般都px translateZ(100px) 向外移动100px*/
        /* transform: translateX(100px) translateY(100px) translateZ(100px); */
        /* 简写 xyz不能省略 没有就写0*/
        transform: translate3d(100px, 100px, 100px);
    }

## 3.3 透视 perspective ##

透视写在被观察元素的父盒子上
距离视觉点越近的电脑平面成像越大，越远成像越小

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

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

## 3.4 旋转 rotate3d ##
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 为角度

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


transform-style

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