鼠标经过时图片放大

HTML:

<div>

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

</div>

CSS:

div img{

  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{
   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>

原文地址:https://www.cnblogs.com/zhangxiaoshu/p/5939325.html