最近要做产品要做一个屏幕碎裂效果，产品要那种点击碎屏进入首页的效果，由于做的是h5页面，这种闪屏效果需要考虑不同分辨率的手机和样式，还有可能是pc访问或者手机访问，于是这里花了一天时间做出了这个效果，这里分享下
html的部分：
<body>
<div class="main-box">
//container是碎屏后跳转的页面
<div class="container">
</div>
//container-one是首页碎屏部分
<div class="container-one">
<div class="clipped-box">
<div class="content">
</div>
</div>
<section class="hand-btn scale" v-cloak>
</section>
<section class="hand" v-cloak>
</section>
</div>
</div>
</body>
css部分：
body {.main-box {height: auto;}.common-swiper {display: none;bottom: 2.9rem;}}.container-one {width: 15rem;position: relative;margin: 0px auto;}.clipped-box {cursor: pointer;-webkit-transition: top 1.2s linear;transition: top 1.2s linear;}.clipped-box div {z-index: 9999;text-align: center;box-sizing: border-box;-moz-box-sizing: border-box;}.clipped-box, .clipped-box div {width: 100%;height: 100%;position: relative;}.clipped-box div {position: absolute;top: auto;left: 0;// -webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;// transition: transform 1.4s ease-in, background 0.3s ease-in;}.hand-btn {width: 7.9rem;height: 2.1rem;background: url(/images/04/08/19d4a76b7e2c08002655dd139717f826.png) no-repeat center center;background-size: 100% auto;position: absolute;z-index: 10000;cursor: pointer;}.hand {width: 1.8rem;height: 1.8rem;background: url(/images/04/08/c7c3bfda3cf0ce9873da463386abd335.png) no-repeat center center;background-size: 100% auto;position: absolute;z-index: 10001;animation: position 1.5s infinite;@keyframes position {0% {transform: translate3d(0,0,0);}50% {transform: translate3d(1rem,.5rem,0);}100% {transform: translate3d(0,0,0);}}}
js部分：
$(document).ready(function() {(genClips = function() {$t = $('.clipped-box');var amount = 5;var width = $t.width() / amount;var height = $t.height() / amount;// var totalSquares = Math.pow(amount, 2);var html = $t.find('.content').html();var y = 0;for(var z = 0; z <= (amount*width); z = z+width) { $('<div class="clipped" style="clip: rect('+y+'px, '+(z+width)+'px, '+(y+height)+'px, '+z+'px)">'+html+'</div>').appendTo($t);if(z === (amount*width)-width) {y = y + height;z = -width;};if(y === (amount*height)) {z = 9999999;}}})();function rand(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}var first = false,clicked = false;$('.clipped-box div').each(function(){var self = $(this);//获取屏幕分辨率的高var ScreenHeight = window.screen.height;var ScreenWidth = window.screen.width;var scaling = parseInt((ScreenHeight/ScreenWidth)*100)if(scaling == 150){$('.clipped-box').css({'background' : 'url(/images/04/08/39d2f8b4de60285aa938d099e4c6b3a5.jpg) no-repeat center center','background-size' : '100% auto',});$(this).css({'background' : 'url(/images/04/08/44db2204e8b5ea0cc0569e8847e9caa4.png) no-repeat center center','background-size' : '80% auto',});$('.hand-btn').css({'bottom' : '1.04rem','left' : '3.2rem',});$('.hand').css({'bottom' : '1.04rem','right' : '3.2rem',});}else if(scaling == 177){$('.clipped-box').css({'background' : 'url(/images/04/08/cb1a4875a997be8e1f93d0e547524c3e.jpg) no-repeat center center','background-size' : '100% auto',});$(this).css({ 'background' : 'url(/images/04/08/b0162cce01237134e7b9605e3394b301.png) no-repeat center center','background-size' : '80% auto',});$('.hand-btn').css({'bottom' : '2rem','left' : '3.68rem',});$('.hand').css({'bottom' : '1.4rem','right' : '3.2rem',});}else if(scaling == 216){$('.clipped-box').css({'background' : 'url(/images/04/08/7a91c5de7d8886d844bd69170fb4f76a.jpg) no-repeat center center','background-size' : '100% auto',});$(this).css({ 'background' : 'url(/images/04/08/c21d5b7549d34c2c915303246997ed1b.png) no-repeat center center','background-size' : '80% auto',});$('.hand-btn').css({'bottom' : '3.8rem','left' : '3.6rem',});$('.hand').css({'bottom' : '3.4rem','right' : '3.2rem',});}else if (scaling < 150){$('.clipped-box').css({ 'background' : 'url(/images/04/08/7a91c5de7d8886d844bd69170fb4f76a.jpg) no-repeat center center','background-size' : '100% auto',});$(this).css({ 'background' : 'url(/images/04/08/c21d5b7549d34c2c915303246997ed1b.png) no-repeat center center','background-size' : '80% auto',});$('.hand-btn').css({'bottom' : '1.4rem','left' : '3.6rem',});$('.hand').css({'bottom' : '1.04rem','right' : '3.6rem',});}else {$('.clipped-box').css({ 'background' : 'url(/images/04/08/7a91c5de7d8886d844bd69170fb4f76a.jpg) no-repeat center center','background-size' : '100% auto',});$(this).css({'background' : 'url(/images/04/08/c21d5b7549d34c2c915303246997ed1b.png) no-repeat center center','background-size' : '80% auto',});$('.hand-btn').css({'bottom' : '3.8rem','left' : '3.6rem',});$('.hand').css({'bottom' : '3.4rem','right' : '3.6rem',});}})// On click$('.clipped-box div, .hand-btn, .hand').on('click', function() {$('.hand-btn').css({'display' : 'none'});$('.hand').css({'display' : 'none'});//获取屏幕分辨率的高var ScreenHeight = window.screen.height;var ScreenWidth = window.screen.width;var scaling = parseInt((ScreenHeight/ScreenWidth)*100)if(clicked === false) {clicked = true;$('.clipped-box .content').css({'display' : 'none'});$('.clipped-box div:not(.content)').each(function() {var v = rand(130, 80),angle = rand(70, 89), theta = (angle * Math.PI) / 180, g = -9.8; var self = $(this);var t = 0,z, r, nx, ny,totalt = 100;var negate = [1, -1, 0],direction = negate[ Math.floor(Math.random() * negate.length) ];var randDeg = rand(-20, 20), randScale = rand(0.7, 0.7),randDeg2 = rand(-20, 20);if(scaling == 150){$(this).css({'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)', 'background' : 'url(/images/04/07/1e00c604088364ba3380a400310770a4.jpg) no-repeat center center',});}else if(scaling == 177){$(this).css({'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)', 'background' : 'url(/images/04/07/538e6c09116c096b2d8d703fc08ee028.jpg) no-repeat center center',});}else if(scaling == 216){$(this).css({'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)', 'background' : 'url(/images/04/07/bf8529c0cbc4c30ee94a2dc4e98bd83f.jpg) no-repeat center center',});}else { $(this).css({'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)', 'background' : 'url(/images/04/07/88cb8024eeec0285f824d4fd9e264d71.jpg) no-repeat center top',});}z = setInterval(function() { var ux = ( Math.cos(theta) * v ) * direction;var uy = ( Math.sin(theta) * v ) - ( (-g) * t);nx = (ux * t);ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));$(self).css({'bottom' : (ny)+'px', 'left' : (nx)+'px'});t = t + 0.10;if(t > totalt) {clicked = false;first = true;$('.clipped-box').css({'top' : '-1000px', 'transition' : 'none'});$(self).css({'left' : '0', 'bottom' : '0', 'opacity' : '1', 'transition' : 'none', 'transform' : 'none'});clearInterval(z);}}, 12); });};f= setTimeout(() => {$('.container').fadeIn(200);$('.container-one').css({'display' : 'none'});$('#bottomWrap').fadeIn(200);$('.common-swiper').fadeIn(200)}, 2000);});});
使用的时候直接复制就能看到效果。这里附上线上链接哈 为了方便各位实体效果：
/ncamp/preview?camp_id=132&view_id=0#
