13-CSS3的渐变、过渡

CSS3 中的渐变与过渡

CSS3 中的渐变

此前，这些效果必须使用图像来显示部分效果，但是现在可以使用css渐变实现，减少下载的事件和管带的使用
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡(至少是两个颜色)
CSS3 定义了两种类型的渐变（gradients）：
	线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向...
	径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变
	background-image:linear-gradient(direction, color-stop1, color-stop2, ...);
		direction	默认为to bottom，即从上向下的渐变
			可以设置的有
				to bottom	从上向下
				to left		从右向左
				to right	从左向右
				to top		从下向上
				to right bottom		向右下角
				to right top		向右上角
				to left bottom		向左下角
				to left top			向左上角
			也可以直接使用角度	45deg, 70deg, ......
		stop		颜色的分布位置，默认均匀分布

径向渐变
	background-image:radial-gradient([shape size at position,] start-color, ..., last-color);
		shape：渐变的形状，默认为ellipse表示椭圆形，circle表示圆形
			如果元素形状为正方形的元素，则ellipse和circle显示一样
		size：渐变的大小，即渐变到哪里停止，
			farthest-corner：最远角 默认值
			closest-corner：最近角
			farthest-side：最远边
			closest-side：最近边
		position: 设置中心点的位置

重复线性渐变
	background:repeating-linear-gradient(direction,color-stop1 ___%, color-stop2 ___%, ...)
重复径向渐变
	background:repeating-radial-gradient(red, yellow 10%, green 15%)

制作彩虹

	赤色RGB(255,0,0)
	橙色RGB(255,165,0)
	黄色RGB(255,255,0)
	绿色RGB(0,255,0)
	青色RGB(0,127,255)
	蓝色RGB(0,0,255)
	紫色RGB(139,0,255)

CSS3 中的角度

CSS3 中的过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

要实现这一点，必须规定两项内容
	指定 要添加效果的CSS属性
	指定 效果的持续时间

transition-property			过渡的 CSS 属性的名称
	none		没有属性会获得过渡效果
	all			所有属性都将获得过渡效果
	property	应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

transition-duration			过渡效果花费的时间，默认是 0
	time		过渡效果需要花费的时间（以秒或毫秒计），默认值是 0，意味着不会有效果

transition-delay			过渡效果何时开始，默认是 0
    time		指定秒或毫秒数之前要等待切换效果开始

transition-timing-function	过渡效果的时间曲线，默认是 "ease"
	linear		规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
	ease		规定以慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
	ease-in		规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
	ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
	ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
	cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
	贝塞尔曲线网址：http://cubic-bezier.com/
	steps() 	=== 分几步完成

transition: property	duration	delay	timing-function

过渡属性加的位置  === 两者的区别
	.box { 
    	transition: property	duration	delay	timing-function
    }
	
	.box:hover {
		transition: property	duration	delay	timing-function
	}

transition-timing-function

哪些属性能够实现过渡？

颜色: color background-color border-color
位置: backround-position: top right bottom left
长度:
	[1]max-height min-height max-width min-width height width
	[2]border-width margin padding
	[3]font-size line-height text-indent vertical-align 
	[4]border-spacing letter-spacing Word-spacing
数字: opacity visibility z-index font-weight
组合: text-shadow transform box-shadow clip
其他: gradient