マウスを動かし、画像を周囲に拡大

3766 ワード

マウスを動かし、画像を周囲に拡大


実現する機能:マウスが画像にぶら下がって、画像はゆっくりと周囲に拡大します.効果図:主なコードは以下の通りです.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> title>
    <style type="text/css">
        div{
            width: 300px;
            height: 200px;
            border: #000 solid 1px;
            overflow: hidden;   /* */
        }
        div img{
            cursor: pointer;   /* */
            transition:1s;   /* ( )*/
        }
        div img:hover{
            transform: scale(1.1);   /* */
        }
    style>
head>
<body>
<div class="div">
    <img src="img/349a2d55609f36efd6e17663d017880e.jpg" alt=" " width="300" height="200">
div>
body>
html>

簡書transform属性の詳細