自我学习第十六天--渐变、过渡、2D属性

1、css的渐变

css的渐变分为两种

线性渐变		重复线性渐变
background:linear-gradient(渐变的方向，渐变的颜色，渐变的颜色)
background:repeating-linear-gradient(渐变的方向，渐变的颜色，渐变的颜色，颜色的占位)

	水平或者垂直渐变
			标准模式（不加前缀）
					to left		从右到左
					to right	从左到右
					to top		从下到上
					to bottom	从上到下

			兼容模式（需要加前缀）
					left		在左边
					right		在右边
					top			在上边
					bottom		在下边

	对角渐变
			to left top
			to right top
			to left bottom
			to right bottom

	兼容
			left top
			right top
			left bottom
			right botton

	角度值（单位deg）
			标准模式：
					正值顺时针
					负值逆时针

			兼容模式的角度值=90deg-=标准模式的角度值

一个盒子两个颜色：background: linear-gradient(to left, black 50%,green 50%);
注意：渐变的颜色是可以设置百分比的，前面的颜色的百分比可以设置自己的实色占位，和渐变颜色占位，后面颜色只能设置渐变色占位


径向渐变			重复径向渐变
background：-webkit-redial-gradient(渐变的中心点，渐变的形状，渐变的大小，渐变的颜色1，颜色2)

渐变的中心
		center
		px
		%

渐变的形状
		正圆		circle
		椭圆		ellipse

渐变的大小（和渐变的形状不能同时使用）
		怎么设置大小的：
					closest-side		最近边
					farthest-side		最远边
					closest-corner		最近角
					farthest-corner		最远角

---

2、过渡动画

在一段时间内容，通过用户的动作设置内容的属性值改变

1、事件触发（用户的动作触发）
2、初始值和最终值

transition：参与过渡的属性 执行时间 延迟时间 速度动画

注意渐变是不参加过渡的但是是两个颜色的话会出现过渡的效果

	参与过渡的属性
	transition-property：all

	执行时间
	transition-duration

	延迟时间
	transition-delay

	速度动画
	transition-timing-function:
							ease		默认
							linear		匀速
							ease-in		加速
							ease-out	减速
							ease-in-out	先加速后减速

---

2D属性

	位移、缩放、旋转、倾斜

变形属性：
transform

	1、2D的位移
	类似于我们的相对定位，占位，
	transform：translate（x，y）
	transform：translateX（x）
	transform: translateY(y)

---

2d的缩放（设置的是倍数，默认是中心缩放）

transform：scale（x，y）
transform: scaleX(x)
transform: scaleY(y)

注意：transform：scale（2）是设置x轴y轴都缩放可以设置负值，设置负值是反方向缩放

---

2d的旋转

transform：rotateX（x）		上下旋转
transform：rotateY（y）		左右旋转
transform：rotate（顺时针逆时针旋转）

2d的倾斜

transform：skew（x，y）
transform：skewX（x）
transform：skewY（y）

注意：transform：skew（20deg）是设置X轴倾斜20deg。

改变变形的中心点

transform-origin
				单词方向
				px、%