> >

CSS3实现的图片放大效果

前端开发 452

CSS transition 语法

.div {
	transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

代码

	div {
		transition: all 2s ease;
		border: 5px solid red;
	}
	div:hover {
		border: 5px solid green;
	}

以上代码会将通过两秒延时特效改变div的边框颜色

图片放大(固定尺寸)

鼠标悬停后图片放大,离开后缩小

<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.frame {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoomin img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;
}
.zoomin img:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
<div class="zoomin frame">
<img src="img/zimage.png"  title="Scale on Hover with Transition using CSS" />
</div>
 </body>
</html>

图片放大(非固定尺寸)

鼠标悬停后图片放大,离开后缩小

<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;
}
.zoomin img:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
<div class="zoomin">
<img src="img/zimage.png"  title="All you need to know about CSS Transitions " />
</div>
 </body>
</html>

图片缩小(固定尺寸)

鼠标悬停图片缩小,移除后恢复

<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.frame {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoomout img {
  height: 300px;
  width: 300px;
  -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;
}
.zoomout img:hover {
  width: 200px;
  height: 200px;
}
</style>
</head>
<body>
<div class="zoomout frame">
<img src="img/zimage.png"  title="html - CSS Resize/Zoom-In effect on Image  mouse hover " />
</div>
 </body>

图片缩小(非固定尺寸)

效果同上

<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomout img {
  height: 300px;
  width: 300px;
  -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;
}
.zoomout img:hover {
  width: 200px;
  height: 200px;
}
</style>
</head>
<body>
<div class="zoomout">
<img src="img/zimage.png"  title="Image shrink CSS hover effect" />
</div>
 </body>

Post Comment