<!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>
鼠标放上去 背景颜色变换