css3 transition 实现图片放大缩小
摘要：图片大小 128 * 128transition 定义过度效果，1、可同时设置几个css样式，2、可定义transform（2d 3d 转换）的过度效果transition: width 2s, height 2...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img-content{width: 500px;height: 300px;margin: 0 auto;position: relative}
.img-content img{
position: absolute;
cursor: pointer;
transition: transform 2s;
-moz-transition: -moz-transform 2s;
-webkit-transition: -webkit-transform 2s;
-o-transition: -o-transform 2s;
}
.big{
z-index: 2;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}
.normal{
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-moz-transform:scale(1,1); /* Firefox */
-webkit-transform:scale(1,1); /* Safari and Chrome */
-o-transform:scale(1,1); /* Opera */
}
</style>
<script src="../jquery/jquery.min.js"></script>
<script>
$(function(){
$('.img-content img').off().on('mouseover',function(){
$(this).addClass('big').removeClass('normal')
}).on('mouseout',function(){
$(this).addClass('normal').removeClass('big')
})
})
</script>
</head>
<body>
<div class="img-content">
<img src="../images/tags1.png" alt="" style="top: 10px;left: 50px;"/>
<img src="../images/tags2.png" alt="" style="top: 10px;left: 200px;"/>
<img src="../images/tags3.png" alt="" style="top: 10px;left: 350px;"/>
<img src="../images/tags4.png" alt="" style="top: 150px;left: 50px;"/>
<img src="../images/tags5.png" alt="" style="top: 150px;left: 200px;"/>
<img src="../images/tags6.png" alt="" style="top: 150px;left: 350px;"/>
</div>
</body>
</html>
图片大小 128 * 128
transition 定义过度效果，
1、可同时设置几个css样式，
2、可定义transform（2d 3d 转换）的过度效果
transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s;
相关文章
最新发布
阅读排行
热门文章
猜你喜欢