#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部分 在最下面的函数的两个参数修改成对应的元素即可。
第一个参数是盒子元素,第二个参数是想展示的图片背景元素。