1.渐变
指的是：颜色从一个方向到另一个方向进行改变，从一个角度到另外一个角度进行改变
线性渐变：方向
径向渐变：从中心向四周进行改变
背景产生的====由浏览器进行加载显示的====比较均匀，兼容性比较强的，使用背景图片平铺的话，有可能会失真
1）线性渐变（实际开发应用频率会比较高）
background:linear-gradient(to，方向词，col1，col2，col3)
取值：linear-gradient=====线性渐变
to 方向词======到达某一个方向
to top=========到达上边，从下边开始的
col1============开始颜色
col3============结束颜色
方向的取值问题：
1）取值可以为：to 方向词 到达一个方向
2）不跟方向====从上到下 to bottom
3）到达某一个对角：to top left = left top = 到达左上角
4）线性渐变是按照一个角度进行渐变的：一个度数 deg
5）不跟方向，不跟角度，不跟度数的话，默认是多少度？
to bottom = 180deg/-180deg
2）径向渐变
颜色从中心点向四周进行扩散
background：redial-gradient（center,shape,size,col1,col2,col3）
center======渐变中心，默认的渐变中心在元素的正中位置（对角线的交叉点）
shape=======渐变形状（circle，ellipse）======默认值是椭圆
size========渐变大小（需要调整渐变中心的位置）====渐变大小是到达对角线的位置
col1========渐变的开始颜色
col2========渐变的中间颜色
col3========渐变的结束颜色
元素如果是正方形 渐变形状为正圆 元素如果是长方形 渐变形状为椭圆
到达最远的边结束======farthest-side
到达最近的边结束======colsest-side
到达最远的角结束======farthest-corner
到达最近的角结束======colsest-corner
-webkit-radial-gradient 浏览器兼容 适应更多浏览器
3）重复渐变
线性重复渐变
background：repeating-linear-gradient（）
径向重复渐变
background：repeating-radial-gradient（）
2.过渡
代表的是元素的一种状态向另外一种状态缓慢的发生改变===动态的效果
大小，颜色，圆角，位置的移动，等等等
属性：transition
取值：transition：all 3s linear 5s
all=========所有参与过渡的属性=======transition-propurty
3s==========过渡动画花费的时间=======transition-duration
linear======过渡动画的类型（好多种）---------------transition-timing-function
匀速的意思
5s==========过渡延迟执行时间（多少秒之后再去执行）--transition-delay
过渡属性属于动画的一种，这个动画需要配合属性的事件才能完成，
大部分属性都能参与过渡，display是不能参与过渡的
二级菜单要用高度去做 配合overflow：hidden
过渡动画的类型有好多种
linear=========匀速
ease===========逐渐慢下来
ease-in =======加速
ease-out=======减速
ease-in-out====先加速后减速
贝塞尔曲线：
属性值：cubic-bezier（）
逐帧动画：transition-timing-function：steps（动画执行的步数）
3.2D 中的平面效果
学习的就是四个函数：平移，旋转，缩放，倾斜
1）平移
元素位于平面上面的水平，垂直方向上面的移动
属性：transform
取值：translateX（）
translateY（）
translate（）==给值的时候给一个值代表的是水平方向如果你先要使用translate属性值的数，水平垂直一起移动需要给两个值
注意：1）与margin对应的效果一致，如果没有改变元素的大小的话，添加过 渡效果的话，
平移属性是平滑的，不会出现闪烁的效果
2）如果你的大小形状发生改变的话，照样使用平移属性也会出现闪烁情况，====动画属性解决
2）旋转
元素位于平面上面的中心或者是沿着某一个位置进行旋转
属性：transform
取值：rotateX（）=======沿着x轴进行旋转
rotateY（）=======沿着y轴进行旋转
rotate（）========沿着中心进行旋转
注意：调整旋转中心需要在默认初始状态下设置
transform-origin：top center：
旋转中心可以设置在元素内部，也可以设置在元素边上，也可以设置在元素外部
默认的旋转中心在元素正中位置，左上角为0px 0px的位置
3)缩放
元素位于页面中进行缩小和放大，占页面的空间位置
属性：transform
取值：scaleX（）=====沿着水平方向缩放
scaleY（）=====沿着垂直方向缩放
scale（）======沿着对应的中心进行缩放
如果scale里面跟一个值的话，就代表的是水平和垂直都进行缩放一样的倍数
如果不一样的话，第一个参数代表的是水平方向，第二个参数代表的是垂直方向
取值为>1的值的时候 沿着中心放大
取值为=1的值的时候，不缩小不放大
取值为<1并且>0的时候，缩小
取值为=0的时候，隐藏元素
取值可以小于0
-2==========-（父号）代表的是反方向，-（负号）后面的值代表的是缩小或者是放大
4)倾斜
让元素在页面中产生一个倾斜角，类似旋转但是作用不一样
属性：transform
取值：skewX（）=====沿着x轴倾斜，====形成一个与y轴的夹角
skewY（）=====沿着y轴倾斜，====形成一个与x轴的夹角
skew（）======沿着中心倾斜，===形成与x轴 y轴的夹角都有
半圆：
border-top-left-radius:200px;
border-bottom-left-radius:200px;
border-radius:200px 0px 0px 200px
知识点：结构伪类 找第十三个 子元素
.box>div:nth-child(13){
background-color:orange;
}
/* 除了7之外的所有的盒子都边透明 */
.box>div:not(:nth-child(7)){
background-color: rgba(0,0,0,0);
}
