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` 子元素开启立体空间
-  代码写给父级,但是影响的是子盒子

相关文章