#a {
position:relative;
width:300px;
height:200px;
overflow:hidden;
box-shadow:1px 1px 2px 3px #ececec;
margin:10px auto 0;
}
#b {
position:absolute;
top:0px;
left:0px;
background:url(http://www.jq22.com/demo/jQuery-lbt201701151156/images/img2.jpg);
background-size:100% 100%;
width:180%;
height:130%;
}
body {
width:100vw;
height:100vh;
background:transparent;
}
.anim {
-webkit-animation:largen 200ms 1 linear;
-webkit-animation-fill-mode:forwards;
}
.anim_stop {
-webkit-animation:largen_back 200ms 1 linear;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes largen {
from {
-webkit-transform:scale(1,1);
}
to {
-webkit-transform:scale(1.15,1.15);
}
}@-webkit-keyframes largen_back {
from {
-webkit-transform:scale(1.15,1.15);
}
to {
-webkit-transform:scale(1.0,1.0);
}
}布局简单,内有详细步骤注释代码,或者直接复制js部分 在最下面的函数的两个参数修改成对应的元素即可。
第一个参数是盒子元素,第二个参数是想展示的图片背景元素。