今天在编程爱好者编码库看见一个好玩的程序，代码如下。
<!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">
</div></body></html>