<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3鼠标hover背景图片缩放动画效果</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>CSS3鼠标hover背景图片缩放动画效果 <span>Zoom background-image on hover</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="container">
<div class="hover-zoom" style="background-position: bottom right; background-image: url(img/1.jpg)">
<p>
Bottom right
</p>
</div>
<div class="hover-zoom" style="background-position: bottom left; background-image: url(img/2.jpg)">
<p>
Bottom left
</p>
</div>
<div class="hover-zoom" style="background-position: top right; background-image: url(img/3.jpg)">
<p>
Top right
</p>
</div>
<div class="hover-zoom" style="background-image: url(img/4.jpg)">
<p>
Center by default
</p>
</div>
</div>
</div>
</body>
</html>
CSS3鼠标hover背景图片实现缩放动画效果.zip （14个子文件） 
132689950996897746 CSS3_hoversf css 
htmleaf-demo.css 6KB style.css 617B normalize.css 2KB related 
2.jpg 28KB 1.jpg 28KB img 2.jpg 12KB 1.jpg 26KB 3.jpg 44KB 4.jpg 56KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 2KB资源评论
