效果
之前:
之后
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
- 文档查询: