码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标经过时图片放大

时间:2016-10-08 19:49:59      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:

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>

鼠标经过时图片放大

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!