2020-03-03

一、过渡属性 transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
过渡属性需要触发事件，如：hover（鼠标划过事件）

1. transition-property：检索或设置对象中的参与过渡的属性
   说明：属性值可以单独设置否个属性，也可以设置多个属性 width，height； 还可以设置为all（默认值）代表所有属性
2. transition-duration：检索或设置对象过渡的持续时间
   说明：设置过度时间（s, ms） 1s = 1000ms
3. transition-delay：检索或设置对象延迟说明：设置延迟过度时间（s, ms） 属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果；
4. transition-timing-function：检索或设置对象中过渡的动画类型过渡的时间
   说明：
   linear 匀速
   ease（默认值）逐渐慢下来
   ease-in加速
   ease-out减速
   ease-in-out先加速后减速
   贝塞尔曲线网址：http://cubic-bezier.com/
   复合式写法：transition:all 2s 1s linear ;
   transition: 2s linear 1s all ;
   说明：当使用复合式写法的时候，过度时间和延迟时间的顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间；
   注：哪个元素发生变形，就把过渡属性添加给谁； 建议写给元素初始的效果里；
   二、2D transform
   transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。
   2D功能函数：
   1、2D位移 translate()
   说明：translate(tx) 当参数设置一个值的时候，代表水平方向的位移；
   translate(tx，ty) 第一个值代表水平方向的距离，第二个值 垂直方向的距离；
   translate(tx，ty, tz) 第一个值代表水平方向的距离，第二个值 垂直方向的距离.第三个值 沿Z轴移动（3D）
   translateX(tx) 指定方向设置位移 沿X轴移动
   translateY(ty) 指定方向设置位移 沿Y轴移动
   translateZ(tz) 指定方向设置位移 沿Z轴移动 ( 3D)
   当属性值为正值时 代表的是向右或者向下移动，当为负值的时候 代表 向左或向上移动
   说明：属性值可以用px 也可以用%（百分比大小的参照物是元素的宽高）
   说明：translate（）位移的效果和定位里的relative的效果是类似的，都是在当前位置进行位移的，对其元素的布局是没有影响的，原来的位置的保留的。
   2、2D缩放scale()
   说明： 属性值代表的是倍数，是不用加单位； 0——1 之间是 缩小的效果， 大于1的时候都是放大效果；
   默认值 是 1；
   scale( 值1 ) 代表水平和垂直都放大或者缩小
   scale( 值1，值2 ) 值1： 水平方向的缩放大小 值2 ：垂直方向
   属性值可以设置为负值，但是很少用；
   scaleX（值） 水平方向的缩放比例
   scaleY（值） 垂直方向的缩放比例
   scaleZ（值） Z轴方向的缩放比例 （3D）
   3、2D旋转让rotate()
   说明: 属性值的单位是度（deg）
   rotate() 沿着中心点旋转； 只能放一个属性值 ，正值：顺时针旋转； 负值： 逆时针旋转；
   rotateX() 沿X轴旋转
   rotateY() 沿Y轴旋转
   rotateZ() 沿Z轴旋转 （3D）
   4、2D倾斜 skew()
   说明：属性值的单位是度（deg） ；属性值为正值：向左 或向上倾斜 负值：向右或向下倾斜
   skew( 值1 )一个值的时候 代表 沿X轴倾斜
   skew( 值1，值2) 值1： 沿X轴的倾斜 值2 ：沿Y轴的倾斜
   skewX（） 沿X轴的倾斜
   skewY（） 沿Y轴的倾斜
   说明：元素通过 transform进行变形时，都是对其他元素的布局不产生影响的。不脱离文档流。
   变形时元素默认情况下都是沿着元素的中心点去变形的
   当使用复合式写法的时候，他们顺讯不同，会导致结果不一样，他们执行的顺讯是从后向前解析的。
   transform: translate(100px) rotate(60deg);
   5、原点设置属性：transform-origin
   定义：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
   说明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直
   px % left top right bottom ;
   6、backface-visibility ：隐藏被旋转的 div 元素的背面backface-visibility:visible;可见 （默认值）
   backface-visibility:hidden;不可见
   backface-visibility 的bug : 如果元素翻转后结束后显示在上一层，给他加一个背景色就可以解决了。
   三、css3 渐变
   概念：CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
   线性渐变：
   语法：
   background-image: linear-gradient(direction, color-stop1, color-stop2, …);
   说明：
   direction：默认为to bottom，即从上向下的渐变；
   还可以设置为度数。自上向右 （0度 —— 90度的变化） – 旧的标准是相反 自右而上 （ 90—— 0）
   stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
   径向渐变：
   语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);
   position：渐变起点的位置，可以为百分比，默认是图形的正中心。
   shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示