代码

鼠标移到图片上,图片自动放大(编号4)

字号+ 作者:admin 来源:未知 2019-01-12 08:19

在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果,但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来

在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果,但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。
 
在介绍实现代码之前,我们先来看看效果演示吧。
鼠标移到图片上图片放大
请把鼠标移到图片上
 
看到效果是:鼠标移到图片上时,图片会自动放大。
 
CSS3实现方法如下:
 
HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移到图片上时,图片会自动放大</title>
<style type="text/css">
#div1{
  width: 800px;
  height: 800px;
  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="./ims/1.jpg" />
</div>
</body>
</html>
 
 
 


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读