H5学习---html，css---渐变过渡,2D转换

渐变

- 线性渐变
	background:linear-gradient(方向,颜色1,颜色2,...)
		方向：
			to top由下到上
			30deg
- 径向渐变
	background: radial-gradient(pink,purple);
- 重复线性渐变
	background: repeating-linear-gradient(red 10%,pink 20%);
- 重复径向渐变
	background: repeating-radial-gradient(red 10%,pink 20%);

过渡

transition:需要过渡的属性  过渡时间  速度效果  延迟时间;
- 放置的位置
	移入移出都有效果:给元素本身
	移入有效果,移出没有:给hover
- 速度效果
	linear匀速
	ease慢速开始，然后变快，然后慢速结束,默认值
	ease-in慢速开始
	ease-out慢速结束
	ease-in-out慢速开始和结束
- 多个属性不同效果的设置
	transition: width 1s linear,height 2s ease,background 3s linear;
- 多个属性共同效果的设置
	transition: all 2s linear .2s;

2D转换

- 位移
	transform: translate(-200px);一个值代表水平方向移动
	transform: translate(100px,100px);第一个代表水平，第二个值代表垂直
	transform: translateX(200px);沿X轴方向运动
	transform: translateY(200px);沿Y轴方向运动
- 旋转
	transform:rotate(45deg);正值为顺时针转动,负值为逆时针转动
	- 转换中心
		transform-origin: left top;转换中心为左上角
		transform-origin: 20px 20px;指定x,y轴的坐标点
	- 位移+旋转效果
		transform: translateX(200px) rotate(90deg);
- 缩放
	transform:scale(2);水平垂直都缩放
	transform:scale(0.5,2);水平变为原来的0.5倍，垂直变为2倍
	transform:scaleX(2);
	transform:scaleY(2);
- 倾斜
	transform:skew();
	transform:skewX(30deg);
	transform:skewY(30deg);