## 过度 
> 可以实现元素本身变化的平滑效果
```css
.box {
  transition: width time,height time;
}
/*all 所以变化全部为动效*/
.box {
  transition: all time;
}
```




## 动画  
### 声明动画  
```css
@keyframes name {
  from { 
  
  } 
  to { 
      
  }
} 
```

参数： 
name: 动画名字    
from: 初始状态  可以写为0%  
中间0%~100%任何可以添加任何状态    
to：终止状态 可以写为100%  


## 调用动画  
```css
.box{animation: name time}
```
动画结束后始终保持100%状态  
```
animation-fill-mode: forwards;
```
动画循环次数  

```
animation-iteration-count: 3;
// infinite：无限循环
```

CSS-动画与过渡

## em  
### 说明 
em是一个相对单位，相对于当前元素的font-size文字大小，若当前元素未指定大小，则按照父元素字体大小设置【或浏览器默认字体大小，网页中默认字体大小16px、最小字体大小为12px】  



## vh  
### 说明  
默认下视窗高度为100vh  

### 注意  
父级和子级的vh相同则都为一样的高度，与子父级关系无关  


## px  
### 说明  
像素单位  

## rem  
### 说明  
 相对单位  root em缩写  

### 注意  
- 可以设置html的font-size大小，然后采用rem单位 方便响应式布局  

- 不会发生嵌套等情况下的数值混乱，通过js获取屏幕像素比然后修改html的font-size大小配合rem实现响应式布局

CSS-常用单位

## 图片  
### 分类  
- img图片标签引入  
- 作为backgroud背景引入  



### img图片标签引入 
#### 语法  
```html
<img src="" alt="" />
```  

#### 特点


### 作为background背景引入  
#### 特点  
- div必须具有宽高   
- div宽高<图片宽高时会发生裁剪  
- div宽高>图片宽高时，图片默认平铺
#### 语法  
```html
.banner{background: url("") no-repeat center}
```
#### 使用  
- 当需要在图片里添加文字，则使用background背景引入  
- 全屏大图时使用背景图  

## 半透明、透明方法  
### opacity
#### 说明  
用于设置div透明度、但是会影响子集
#### 语法
```
opacity: value 
```
value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）  
opacity属性具有继承性，会使容器中的所有元素都具有透明度  

### rgba 
#### 说明  
单纯设置颜色透明度   
#### 语法
```
rgba（R,G,B,A）
```

RGBA Red（红色）   
Green（绿色）  
Blue（蓝色）  
Alpha（不透明度）  

#### rgba的取值范围：
R：红色值,正整数 （0~255）    
G：绿色值,正整数 （0~255）   
B：蓝色值,正整数（0~255）  
A：透明度,取值0~1之间

CSS-图片引入方式

## 旋转  
### 说明  
旋转div内部文字也会发送变化，任何元素都可以旋转  



### 语法  
```css
transform: rotate(90deg)
```

### 水平X轴旋转  
```css
transform: rotateX(90deg)
```

### 水平y轴旋转  
```css
transform: rotateY(90deg)
```

## 偏移  
### 语法  
```css
transform: translaate(50px,100px;)
```


## 倾斜  
### 语法  
```css
transform: tskew(90deg)
```


## 缩放  
### 说明  
不会改变元素css设置的大小，会造成元素内部元素文本等变形   

### 语法  
```css
transform: scale(2,3);
```
参数: 值依次为水平缩放倍数、垂直缩放倍数  

### 注意  
多出来的部分不会站位置  


# 缩放 
## transform  
可以对元素进行调整大小、移动、旋转、翻转等操作。  

## 语法示例  
```css
p:hover {
  transform: scale(2.1);
}
``` 
### 参数  
2.1：缩放倍数

CSS-2D3D转换和缩放

## 边框与圆角  
> `border`边框



```css
div {
/*四个值，顺时针排列*/
    border-radius: top right bottom left;
/*两个值，第一个值表示左上和右下，第二个值表示左下和右上*/
    border-radius: a b;
/*三个值，上、左右、下*/
   border-radius:2px 1px 2px;
}
```

## 轮廓  
```css
outline: ：outline-color, outline-style, outline-width;
```

### 参数  
outline-color： 规定边框的颜色  
outline-style：规定边框的样式  
outline-width： 规定边框的宽度  
inherit： 规定应该从父元素继承 

## 特点  
1. 轮廓不会占据位置，不会影响附近边框  


## 投影 
### 用途  
用于设置元素投影  
```css
div {
box-shadow: innset x-shadow y-shadow blur spread color
}
```
### 参数  
inset：内部阴影  
x-shadow: 水平方向投影，为0时左右两侧投影相等    
y-shadow: 竖直方向投影，为0时上下两侧投影相等  
blur: 模糊半径(值越大，模糊效果越强)    
spread: 阴影尺寸  
color: 投影颜色  

### 特点  
1. 不会影响元素位置