css3 transition平滑过渡 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			background:red;
			width:400px;
			height:200px;
			/* -property定义过渡属性 */
			-webkit-transition-property:background-color;
			/* -duration定义过渡时间 */
			-webkit-transition-duration:2s;
			/* -delay 定义延迟时间 */
			/* -webkit-transition-delay:1s; */
			/* -timing-function定义过渡效果  
				ease缓解效果 
				 linear 线性效果 
				 ease-in渐显效果 
				 ease-out渐隐效果 
				 ease-in-out渐显渐隐效果 
				 cubic-bezier特殊的立方贝塞尔曲线效果
			 */
			-webkit-transition-timing-function: linear;
　　　　　　　　　　　　　　/*设计倒影效果*/
　　　　　　　　　　　　　　-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.45,transparent),to(rgba(255,255,255,0.25)));
		}

		div:hover{
			background:blue;

		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

　鼠标放上去 背景颜色变换

posted @ 2016-04-08 14:32  mingjixiaohui  阅读(1079)  评论(0)  编辑  收藏  举报