css实现鼠标移动到图片上后图片放大同时不超出指定范围
生活随笔
收集整理的這篇文章主要介紹了
css实现鼠标移动到图片上后图片放大同时不超出指定范围
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.fuwuimg {
/*控制圖片最終大小，防止放大后圖片大小溢出*/
width: 537px;
height: 200px;
float: left;
overflow: hidden;
}
.fuwuimg img {
width: 537px;
height: 200px;
/*延遲效果*/
transition: all .6s;
}
.fuwuimg img:hover{
cursor: pointer;
/*放大的倍數*/
transform: scale(1.05,1.05);
}
</style>
</head>
<body>
<div class="fuwuimg">
<img src="http://static.pcoyx.com/skin20191126/images/dsf1.jpg">
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的css实现鼠标移动到图片上后图片放大同时不超出指定范围的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何清除网络共享文件夹保存的帐号和密码
- 下一篇： Bootstrap3.3.7导航栏下拉菜