鼠标移入，图片放大

效果

之前：

之后

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<div class="rect">
		<img src="https://images3.alphacoders.com/246/thumbbig-246225.webp" class="img"/>
	</div>
	
<style>
	.rect{
                width:600px;
                height:338px;
		overflow:hidden;
	}
	
	.img{
		transition:1s;
	}
	
	.img:hover{
		transform:scale(1.2);
	}
</style>
</body>
</html>

解释

  1. 外层 div 设置 overflow:hidden; ：意为超出div宽高的部分不显示
  2. 内层 img 设置 .img:hover{transform:scale(1.2);} 当鼠标指上去的时候放大;

备注

  1. transition： 这里面的4种，我测试了，但是没明白啥效果，至少我测试效果不明显，或者我代码有问题，又或者菜鸟的在线html有点问题无法实现

参考

  1. 实现思路，然后自己对着他的代码来了一遍：https://blog.csdn.net/m0_59792745/article/details/127078853
  2. 在菜鸟教程在线编辑器实现：https://www.runoob.com/try/try.php?filename=tryhtml_intro
  3. 文档查询：
posted @ 2022-09-30 14:15  echo_lovely  阅读(480)  评论(0)  编辑  收藏  举报