您现在的位置是：首页 > 技术交流技术交流

鼠标移到图片上图片放大缩小效果

2021-09-10【技术交流】2047 人已围观

简介鼠标移到图片上图片放大缩小效果我们很常见，可以提升一下用户的使用体验。这个靠jquery可以实现，但是使用css也可以...

鼠标移到图片上图片放大缩小效果我们很常见，可以提升一下用户的使用体验。这个靠jquery可以实现，但是使用css也可以实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
  width: 200px;
  height: 138px;
  border: #000 solid 1px;
  margin: 50px auto;
  overflow: hidden;
}
#div1 img{
  cursor: pointer;
  transition: all 0.6s;
}
#div1 img:hover{
  transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
  <img src="demo.jpg" />
</div>
</body>
</html>

关键技术点，图片的外层div超出部分隐藏。

关注宁波网站建设博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ ()

上一篇：网站字体引用google字体

下一篇：祝新老客户2021国庆快乐