マウスを動かし、画像を周囲に拡大
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属性の詳細