CSS-实战-交互式图片
2017-08-13 本文已影响0人
Java小工匠
1、实现效果
当鼠标经过图片，图片会逐渐放大，仿佛你距离图片越来越近,常在旅游、商品的展示页面应用。
2、实现思路
（1）使用 scale 函数放大图片
（2）使用transition实现逐渐变化的动画。
（3）使用 overflow: hidden; 控制图片在图片外围盒子中。
3、源代码
素材：
图片一张
bl.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实战-鼠标经过动画</title>
<style type="text/css">
.photo {
overflow: hidden;
position: relative;
width:290px;
height:376px;
float:left;
}
.photo img{
width:100%;
height:auto;
}
.photo:hover img{
-webkit-transform:scale(1.15);
-moz-transform:scale(1.15);
-o-transform:scale(1.15);
transform:scale(1.15);
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
</style>
</head>
<body>
<div class="photo">
<!--博客bug，需要调整下面一行代码-->
< img src="bl.jpg " border="0" >
</div>
</body>
</html>
