css3实现小米商城鼠标移动图片上浮阴影效果

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>
相关阅读:
grpc(五)
go的代码库
 grpc(四)
grpc(三)
grpc(二)
grpc(一)
java的泛型
 如何学习编程语言
 老男孩K8S集群部署（二）
VMware虚拟机状态正常，但SecureCRT连接时显示超时的解决方法
原文地址：https://www.cnblogs.com/future-zmy/p/6055808.html