效果 之前： 之後 Code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <div class="rect"> <img src="https: ...
效果
之前：
之後
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
- 文檔查詢：
