看了张大神的这篇文章后自己写的,兼容性不好clip-path要加-webkit-
css
#test img{position: absolute;} .active .clip{ will-change: transform; animation: clear_transform .5s both; } @keyframes clear_transform { to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); } } .active #image{ opacity: 0; animation: fadeIn .1s .4s both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #repeat{position: absolute;top: 200px;}
html
<div id="test"> <img src="http://img.mswon.com/img.php?url=http://npic7.edushi.com/cn/zixun/zh-chs/2016-05/31/e-3053153-s1464644414872299.jpg" id='image'/> </div> <button id='repeat'>再来一次</button>
JS
test('image');//image-id function test(ele){ var clip = { parent:'', id:ele, src:'', num:0,//裁剪个数 x_tier:10,//X轴要裁剪的个数 y_tier:10,//Y轴要裁剪的个数 h:0,//图片高度 w:0,//图片宽度 y:0,//要裁剪的高度40 x:0//要裁剪的宽度60 } clip.parent = document.getElementById(ele).parentNode;//图片父级div var img = document.getElementById(clip.id); img.onload = function(){ clip.src = img.getAttribute('src'); clip.h = img.clientHeight; clip.w = img.clientWidth; clip.x = clip.w/clip.x_tier; clip.y = clip.h/clip.y_tier; clip.num = clip.num*clip.num; start_clip(); } function start_clip(){ var info = '<img src="'+clip.src+'" id="image" style="opacity:0;"/>'; for (var i = 0;i<clip.x_tier;i++){ for (var j = 0;j<clip.y_tier;j++) {//(x,y) //裁剪 var d1 = (clip.x*j)+'px '+(clip.y*i)+'px'; var d2 = (clip.x*j)+'px '+(clip.y*i+clip.y)+'px'; var d3 = (clip.x*j+clip.x)+'px '+(clip.y*i+clip.y)+'px'; var d4 = (clip.x*j+clip.x)+'px '+(clip.y*i)+'px'; var css1 = '-webkit-clip-path: polygon('+d1+','+d2+','+d3+','+d4+');'; //旋转 var r = random(360)+'deg'; //位移 var t_x = random(500)+'px'; var t_y = random(350)+'px'; var t_z = random(100)+'px'; //缩放 var s = random(1); var css2 = '-webkit-transform:translate3d('+t_x+','+t_y+','+t_z+') rotate('+r+') scale('+s+');'; info +='<img class="clip" src="'+clip.src+'" style="'+css1+''+css2+'"/>' } } clip.parent.innerHTML = info; clip.parent.className = 'active'; } //随机数 function random(n){ var num = Number(Math.random()*n).toFixed(1); return num; } document.getElementById('repeat').onclick = function(){ clip.parent.innerHTML = '<img src="'+clip.src+'" id="'+clip.id+'"/>'; test(clip.id); } }