鼠标移入，图片放大

效果

之前：

之后

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>

解释

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

transform: 对元素进行旋转、缩放、移动或倾斜，详情方法：https://www.w3school.com.cn/cssref/pr_transform.asp;
transition：元素动画，详细使用方法：https://zhuanlan.zhihu.com/p/337001882

备注

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

参考

实现思路，然后自己对着他的代码来了一遍：https://blog.csdn.net/m0_59792745/article/details/127078853
在菜鸟教程在线编辑器实现：https://www.runoob.com/try/try.php?filename=tryhtml_intro
文档查询：
- https://www.w3school.com.cn/cssref/pr_transition.asp
- https://zhuanlan.zhihu.com/p/337001882

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/16744772.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2022-09-30 14:15 echo_lovely 阅读(526) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

· QT5笔记：36. QGraphicsView 综合示例（完结撒花！）

· JQuery 鼠标移入图片移入放大功能简易且明了

· 使用css制作鼠标经过图片时，放大图片1.5倍

· 鼠标放在图片上自动放大

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！

公告

鼠标移入，图片放大

发表于 2022-09-30 14:15阅读：526评论：0推荐：2

Html&Css Html&Css

关注

跳至底部

昵称： echo_lovely
园龄： 5年4个月
粉丝： 39
关注： 12

+加关注

随笔分类

随笔档案

文章分类

C#(1)

echo

鼠标移入，图片放大

效果

之前：

之后

Code

解释

备注

参考

公告

echo_lovely

鼠标移入，图片放大

搜索

常用链接

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!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>