鼠标经过时图片放大


HTML:

<div>

  <img src="引用图片.png">

</div>

 

CSS:

div img{

  width:160px;

  height:120px;

  -webkit-transition:-webkit-transform 1s ease 0s;

  transition:transform 1s ease 0s;

  -webkit-transform-origin:center;

  transform-origin:center;

}

div img:hover{

  -webkit-transform: scale(1.2);

  transform: scale(1.2);

}

 

当鼠标放到图片上时,图片会放大。

完整Demo:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
  div img{
  width: 160px;
  height: 120px;
  -webkit-transform: -webkit-transform 1s ease 0s;
  transition:transform 1s ease 0s;
  -webkit-transform-origin:center;

}
div img:hover{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
div{
  text-align: center;
}
</style>
</head>
<body>

<div>
  <img src="/i/eg_mouse.jpg"/>
</div>

</body>
</html>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM