参考链接 Tag: css3 图片 阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>CSS3实现小米商城鼠标移动图片上浮阴影效果</title>
<style>
*{margin: 0;padding: 0;font-family: '微软雅黑','Helvetica Neue', Arial, sans-serif}
body{
background-color: #f5f5f5;
text-align: center;
}
.image-shadow{
position:relative; /*设置为相对*/
margin: 60px auto;
z-index: 1;
width: 294px;
height: 413px;
background: #fff;
-webkit-transition: all .2s linear; /*渐变效果*/
transition: all .2s linear;
}
.image-shadow:hover{
z-index: 2; /*设置在顶层显示*/
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1); /*添加阴影*/
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, -2px, 0); /*向上浮动*/
transform: translate3d(0, -2px, 0);
}
</style>
</head>
<body>
<h3 style="margin: 60px 0 20px 0; text-align: center">CSS3实现小米商城鼠标移动图片上浮阴影效果</h3>
<div class="image-shadow">
<img src="http://i1.piimg.com/1949/b5f249822d378888.png">
</div>
</body>
</html>