鼠標懸停,圖片向四周放大效果
實現的功能:
鼠標懸停在圖片上,圖片緩慢向四周放大。
效果圖:
主要代碼如下:
<!DOCTYPE html>
<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>