参考：ps://blog.csdn.net/whqet/article/details/49505837
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: #f4f4f4;
}
.it{
display: inline-block;
background-color: #fff;
width: 120px;
height: 120px;
border-radius: 5px;
margin: 10px;
}
/* 慢速方式 */
.make-it-slow {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: box-shadow 0.3s ease-in-out;
}
/* hover响应 */
.make-it-slow:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.correct-item{
box-shadow:0 1px 2px rgba(0,0,0,0.15);
position:relative;
border-radius:5px;
-webkit-transform:translateY(0);
-webkit-transition:all .6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition:all .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.correct-item:after{
content:"";
border-radius:5px;
position:absolute;
top:0;left:0;
width:100%;
height:100%;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
opacity:0;-webkit-transition:all .6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition:all .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.correct-item:hover:after{
opacity:1;
}
.correct-item:hover{
-webkit-transform:scale(1.25, 1.25);
transform:scale(1.25, 1.25);
}
</style>
</head>
<body>
<div class="it make-it-slow"></div>
<div class="correct-item it"></div>
</body>
</html>