css3的各种属性的讲解
1.渐变（gradients）
水平渐变：linear gradient
语法：background:linear-gradient(direction,color1,color2);
direction介绍：
1.这个参数可以省略，默认方向从上到下；
2.这个阐述如果不省略，写方向的起始值：top（从上到下） left（从左到右） bottom（从下到上） right（从右到左）
3.如果这个参数不省略，这个属性前面需要加前缀 或者 to终点
4.对角渐变：linear-gradient(left top,red,blue);
5.角度deg 0代表从下到上， 90deg代表从左到右， linear-gradient(180deg,red,blue)
类似于罗盘：画图
6.渐变过程：background:linear-gradient(red 0%,blue 20%,orange 60%);
0%在0%处代表纯红色，20%是纯蓝色，如果最后一个值不是100%，代表这个值到100%，都是纯orange，如果最后一个值是100%，在100%处是纯橙色；
在起点如果不是0%，是10%代表从0到10%处都是纯红色
径向渐变：（一圈一圈的）
background:radial-gradient
起点中心点，向四周渐变
background:radial-gradient(shape,color1,color2);
参数一：shape
1.参数可以省略，如果省略，默认时ellipse（椭圆），还有个值 circle 代表圆
2.渐变过程：颜色后面带0%百分数，与水平渐变的过程一样；
2.background
background的简写
1.background:color(颜色） url(背景图片） no-repeat(不平铺) 50% 50% （位置）
2.background-size:背景大小
3.background-origin:背景的起点 ：content-box（填充内容） （了解）
带deg是角度，光是数字是弧度
3.css3的特效：
1.2d转换
属性：transform
属性值：translate() 平移
rotate() 旋转
scale() 缩放
skew() 拉伸
translate 平移：
语法：translate(x,y)
1.只有一个值，代表水平平移
2.2个值代表 水平和垂直方向上平移的距离
3.x和y可以为负值，代表正数的相反方向
4.兼容写法
-webkit-transform:translate(50px,50px);
rotate() 旋转
语法：transform:rotate() 只能一个参数
1.参数必须是角度值 例如：30deg
2.沿着平面旋转，正数，顺时针旋转，负数，逆时针旋转
scale() 缩放
语法：transform:scale() 一个数字
1.参数是数字1代表当前元素的一倍； 大于1 变大 小于1 变小
2.如果一个参数水平和垂直变化的值是一样的，如果是两个值 水平一个，垂直一个
skew() 拉伸
语法：transform:skew(30deg,20deg);
2.3d转换
2d在一个平面上， x,y 旋转平移
3d从轴的角度， x,y,z 考虑问题
1.这些平移 旋转的方法不再是围绕面，而是围绕轴；
2.旋转元素的父级需要给予视距的属性：perspective
语法：
1.transform:rotateX() X 体现了3d轴概念
2.transform-origin:元素转换位置：默认50% 50% 0 这个点，
transform-origin:50% 50% 0;
第一个值：x轴 第二个值：y轴 第三个值：z轴
x,y值 可以是但是 left length %
z值 只能是length （数字）
transform-origin:50% 100% 0;
3.transform-style:规定被嵌套元素在3d空间中如何展示
值flat默认的 preserve-3d 子元素3d空间呈现的
4.perspective-origin:规定3d元素底部 （给的转换元素父级，就是渐渐消失的那个方向） 对立面
perspective-origin：50% 50% 元素转换所指的方向
5.perspective : 这个属性是视距的视距 是一种近大远小的效果（给父级的）
6.backface-visibility:visible/hidden;
visible(背面可见的)
hidden(背面不可见)
3.transition：过渡
transition：css属性名称 时间 速度 延迟
transition 最后一个是延迟，即便是0 也得加单位s
4.动画：animation：
animation：name(名称) duration（周期）timing-function（速度） delay（延迟） iteration-count（次数） direction（播放方式）
animation-play-state ：动画停止
animation-fill-mode:forwards ：动画完成停留在末尾不返回原来的位置
@keyframes 用来定义动画的
语法：@-webkit-keyframes 动画名{0%{} 100%{} }
