线性渐变

linear-gradient(方位,颜色1 起始位置,颜色2 结束位置...)
方位: 
	left right 
	top bottom
	deg
	
起始位置:
	% px 结束位置比起始位置的数字大
	
重复渐变: repeating-linear-gradient()

径向渐变

radial-gradient(圆心坐标,半径,形状,颜色1 起始位置,颜色2 结束位置...)
圆心坐标 
  px %
半径:
  px %
近边 近角 远边 远角

起始位置:
% px 结束位置比起始位置的数字大

形状:
ellipse 椭圆(元素本身是正方形,就不可能出现椭圆)
circle 正圆

重复径向渐变: repeating-radial-gradient()

过渡—transition

过渡属性 过渡时间 延迟时间 运动速度;

transition-property:过渡属性;

ransition-duration:过渡时间;

transition-delay:延迟时间;

transition-timing-function:过渡速度;
                            linear
                            ease
                            ease-in
                            ease-out
                            ease-in-out
                            贝塞尔曲线 cubic-bezier(0.02, 0.44, 0.25, 1)
                            
【过渡可以包含变形】          

变形—transform

功能函数:
位移
translate(x,y)
translateX()
translateY()
【注】可以为负数  

缩放:
scale(x,y)
scaleX()
scaleY()
【注】可以为负数,默认值为1
  
旋转:
rotateX()
rotatrY()
rotate() 
【注】默认是z轴

变形:
skew(x,y)
skewX()
skewY()
【注】可以为负数

变形原点:
transform-origin:;
left center right
top center bottom
px %
  
【拓展】
先旋转，后位移 和先位移，后旋转 效果是否一样
答： 效果不一样，因为先旋转改变了位移的方向

标签：变形,px,位置,起始,gradient,过渡,ease
来源： https://blog.csdn.net/Leo_ToooR/article/details/120794050