css之button过渡

点击效果:点击后会将下部阴影给遮挡css之button过渡_第1张图片
代码+注释:
/*
transition 属性设置元素当过渡效果,四个简写属性为:

		transition-property	指定CSS属性的name,transition效果
		transition-duration	transition效果需要指定多少秒或
		毫秒才能完成
		transition-timing-function	指定transition效果的转速曲线
			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 之间的数值
		transition-delay	定义transition效果开始的时候(time:延迟几秒。)
		注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。

		简写模式:
		transition: property duration timing-function delay;
		eg:transition: all 150ms ease-in 2s*/
		
		/*to bottom指从顶部开始
		background: linear-gradient(direction, color-stop1, color-stop2, ...);
		direction	用角度值指定渐变的方向(或角度)。
		color-stop1, color-stop2,...	用于指定渐变的起止颜色。*/
		box-shadow: 0 .25em 0 rgba(23,59,109,0.3),inset 0 1px 0 rgba(0,0,0,0.3);
		/*内部阴影指元素内部的阴影*/
		/*boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 
		h-shadow	必需的。水平阴影的位置。允许负值
		v-shadow	必需的。垂直阴影的位置。允许负值
		blur	可选。模糊距离
		spread	可选。阴影的大小
		color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
		inset	可选。从外层的阴影(开始时)改变阴影内侧阴影*/



	button的过渡
	


	
	


你可能感兴趣的:(css)