图片缩放效果

来源:互联网 发布:spring mysql 读写分离 编辑:程序博客网 时间:2024/06/05 05:36
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .warp {
        border: 1px solid red;
        margin-top:100px;
        overflow: hidden;
        display: inline-block;
        height:300px;
        width:300px;
    }

    .warp img {
         -webkit-transition:all 1.05s linear;
         -moz-transition:all 1.05s linear;
         transition:all 1.05s linear;
         margin:0 auto;
    }

    .warp img:hover{
        transform: scale(1.05);

    }
    </style>
</head>

<body>
    <div class="warp">
        <img src="imager/index_wwz019.jpg" alt="">
    </div>
</body>
0 0