<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
overflow: hidden; //控制图片放大但不会溢出外框,否则图片会溢出外框
}
img{width: 200px;height: 200px;transition:all .5s}
img:hover{transform: scale(1.2);} //图片按比例放大1.2倍
</style>
</head>
<body>
<div>
<img src="images/test_1.jpg">
</div>
</body>
</html>
CSS实现当鼠标经过图片时,图片放大一定的倍数
最新推荐文章于 2024-02-11 11:37:24 发布