vw和vh
width：100vw
height：100vh
vw：100vw是占满屏幕宽度
vh ：100vh是占满屏幕高度
没有滚动条的时候
100vw=100%
有滚动条的时候
100vw 包含滚动条 ，窗口大小不变
100% 刨除滚动条，剩余空间占满
线性渐变
background: linear-gradient(red,gray);
在括号里填入两种或多种颜色
background: linear-gradient( to top , red,gray);
（to top）是往上的意思
默认是往下也就是（to bottom）
（to left）往左
（to right）往右
（to top right）右上角
（to top left）左上角
（to bottom right）右下角
（to bottom left）左下角
background: linear-gradient( 0deg , red,gray);
（0deg）是度数的意思 0-360度自定义
径向渐变
background: radial-gradient(red,green);
在括号里填入两种或多种颜色
background: radial-gradient(red 10%,green50%);
(red 10%,green50%)red从百分之十开始渐变到百分之五十结束渐变百分之五十之后都是green的颜色
background: radial-gradient(circle red 10%,green50%);
circle 圆形
ellipse 椭圆形
size指定了渐变的大小 ，既渐变到哪里停止，他有四个值
background:-webkit- radial-gradient(60% 40% closest-side red 10%,green50%);
-webkit-（兼容性不好要加前缀）（Google浏览器）
两个百分数是让中心点改变
closest-side最近边
farthest-side最远边
closest-corner最近角
farthest-corner最远角
重复渐变
background: repeating-linear-gradient(red，yellow 10%，green 20%);
加上repeating-就可以线性渐变重复
background: repeating-radial-linear-gradient(red，yellow 10%，green 20%);
加上repeating-radial-就可以径向渐变重复
动画过渡属性
transition：all 2s linear 3s；（复合属性）
all 所有属性
（1） transition-property: height;检索或设置对象中的参与过渡的属性
（2） transition-duration: 2s;检索或设置对象过渡的持续时间
（3） transition-timing-function: linear;检索或设置对象中过渡的动画类型
linear 匀速（默认是匀速）
ease逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
cubic-bezier(0,1.59,1,-0.9)贝塞尔曲线
（http//cubic-bezier.com/）贝塞尔曲线网站
（4） transition-delay: 3s;检索或设置对象延迟过度的时间
2D属性
移动
（1）transform:translatex(100px) translatey(-100px);
支持x轴y轴单独平移
（2）transform: translate(-100px,100px);
整体平移
逗号前面的是X轴后面的是Y轴
缩放
transform: scale(1.5);（放大一点五倍）
负值-倒向放大
支持x轴y轴单独平移
scalex x轴
scaley y轴
改变中心点位置
transform-origin:left top;
center默认
left top左上
left bottom左下
left center左中
right top右上
right bottom右下
right center右中
旋转
transform: rotate(-80deg);
正值 顺时针
负值 逆时针
transform: rotatex(-80deg);
x轴旋转（像烧烤架那么转）
y轴旋转（像烧烤架竖着转）
z轴旋转（中心旋转）
倾斜
transform: skew(30deg,30deg );（支持负值）
skewx 正值，拽右下角，往右边拉动（负值，拽左下角，往左边拉动）
skewy 正值，拽右下角，往下边拉动（负值，拽左下角，往下边拉动）
skew(x,y) 正值，拽右下角，往右下边拉动（负值，拽左下角，往左下边拉动）
关键帧动画
复合属性
animation: zidingyi 2s linear 1s infinite；（删除线写的可以自定义）
infinite（无限次）
（1）@keyframes zidingyi{ from{ } to{ } }
from{ }（初始）
to{ }（结束）
（2）@keyframes zidingyi{ 0%{ } 50%{ } 100%{ } }
也可以百分比
单一属性
animation-name: zidingyi;
名称自定义
animation-duration: 2s;
和动画过渡属性效果一样
animation-timing-function: linear ;
和动画过渡效果一样
animation-delay: 5s;
和动画过渡效果一样
animation-iteration-count: infinite;
可以自定义数值，也可以写infinite
animation-play-state: paused;
配合hover属性，paused鼠标移入暂停， running默认效果
animation-direction: normal;
normal默认，reverse反方向，alternate正常交替，alternate-reverse;反方向交替
animation-fill-mode: forwards;
forwards停留最后的画面，none默认，backwards停留初始画面
animation: tao 3s steps(1,start);
数值越大越细腻，end保留当前帧 看不到最后一帧 动画结束，
start保留下一帧 看不到第一帧 从第一帧很快跳到最后一帧
3D属性
平移
（1）transform-style: preserve-3d;
flat是二维，preserve-3d是三维
transform: translateZ(100px);
支持x轴y轴z轴，x轴y轴2D属性里有
（2）transform: translate3d(0,0,100px);
括号里第一个是x，第二个是y，第三个是z
景深
perspective: 900px;
加在父盒子
旋转
3d的是立体旋转，2d的是平面旋转
transform: rotate(-80deg);
正值 顺时针
负值 逆时针
transform: rotatex(-80deg);
x轴旋转（像烧烤架那么转）
y轴旋转（像烧烤架竖着转）
z轴旋转（中心旋转）
缩放
x轴y轴和2D相同
z轴：transform: scalez(20) ;
z轴单独使用没有效果需要配合其他变形函数一起使用才有效果比如：景深，旋转……