jQuery纸张切割效果

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery纸张切割效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
    <title>jQueryֽ���и�Ч��</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"> </script>
    <script src="javascript.js"> </script>
</head>
<body>

    <div class="shredded-paper tk-museo-sans">
        <div class="content">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-1">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-2">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-3">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-4">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-5">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-6">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-7">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-8">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-9">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
        <div class="part-10">
            <div class="alert">
                <i class="ss-alert"></i>
            </div>
            <div class="shred-me">
                DELETE ME!
            </div>
        </div>
    </div>
    <div class="shredder-holder">
        <div class="shredder tk-museo-sans">
            SHREDDER
        </div>
    </div>
</body>
</html>

JS代码(javascript.js):

$(document).ready(function(){
	$('.shred-me').click(function(){
	$('.shredded-paper').addClass('animate-shredded-paper');
	$('.shredded-paper > .content').addClass('animate-content');
	$('.shredder-holder').addClass('shredded-holder-animate');
	$('.shredded-paper .part-1,.shredded-paper .part-2,.shredded-paper .part-4,.shredded-paper .part-6,.shredded-paper .part-8,.shredded-paper .part-10').addClass('shredded-paper-p-animate');
	$('.shredded-paper .part-3,.shredded-paper .part-5,.shredded-paper .part-7,.shredded-paper .part-9').addClass('shredded-paper-q-animate');
	setTimeout(function(){
	$('.shredded-paper').css({
	'top':'-300px'}
);
	$('.shredded-paper').removeClass('animate-shredded-paper');
	$('.shredded-paper > .content').removeClass('animate-content');
	$('.shredder-holder').removeClass('shredded-holder-animate');
	$('.shredded-paper .part-1,.shredded-paper .part-2,.shredded-paper .part-4,.shredded-paper .part-6,.shredded-paper .part-8,.shredded-paper .part-10').removeClass('shredded-paper-p-animate');
	$('.shredded-paper .part-3,.shredded-paper .part-5,.shredded-paper .part-7,.shredded-paper .part-9').removeClass('shredded-paper-q-animate');
	$('.shredded-paper').animate({
	'top':'20px'}
);
}
,4000);
}
);
}
);

CSS代码(style.css):

body{background:#333;overflow:hidden;font-family:sans-serif;padding:0;margin:0;}
.animate-shredded-paper{-webkit-animation:shredGo 3.5s 1 forwards;animation:shredGo 3.5s 1 forwards;}
.animate-content{animation:cover 2.6s 1 forwards 1s;-webkit-animation:cover 2.2s 1 forwards 1s;}
.shredded-holder-animate{animation:shredShake 0.12s 26 0.5s;-webkit-animation:shredShake 0.12s 26 0.5s;}
.shredded-paper-p-animate{animation:Animation1 3.6s 1 forwards 1s;-webkit-animation:Animation1 3.6s 1 forwards 1s;}
.shredded-paper-q-animate{animation:Animation2 3.6s 1 forwards 1s;-webkit-animation:Animation2 3.6s 1 forwards 1s;}
.shredded-paper{width:400px;height:300px;position:absolute;-webkit-perspective:1000px;perspective:1000px;left:525px;top:20px;z-index:5;}
.shredded-paper > div[class^='part-']{height:100%;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;z-index:99;top:0;}
.shredded-paper > .content{background:#fff;height:100%;overflow:hidden;box-sizing:border-box;width:100%;-moz-box-sizing:border-box;position:absolute;-webkit-transform:translateZ(180px) scale(0.82);top:0;z-index:9999;}
.shredded-paper .part-1{clip:rect(0,40px,300px,0);background:#fff;background:-webkit-radial-gradient(32% 97%,29% 62%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #fff;background:radial-gradient(circle at 64% 0%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-2{clip:rect(0,80px,300px,40px);background:#fff;background:-webkit-radial-gradient(28% 11%,16% 62%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #fff;background:radial-gradient(circle at 109% 0%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-3{clip:rect(0,120px,300px,80px);background:#fff;background:-webkit-radial-gradient(12% 88%,23% 62%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #fff;background:radial-gradient(circle at 167% 173%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-4{clip:rect(0,160px,300px,120px);background:#fff;background:-webkit-radial-gradient(73% 9%,65% 52%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #fff;background:radial-gradient(circle at 118% -54%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-5{clip:rect(0,200px,300px,160px);background:#fff;background:-webkit-radial-gradient(23% 97%,29% 62%,rgba(0,0,0,0.3),rgba(255,255,255,0)),-webkit-radial-gradient(72% 20%,29% 62%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #fff;background:radial-gradient(circle at 127% 57%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-6{clip:rect(0,240px,300px,200px);background:#fff;background:-webkit-radial-gradient(85% 97%,46% 57%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #FFF;background:radial-gradient(circle at 116% -103%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-7{clip:rect(0,280px,300px,240px);background:#fff;background:-webkit-radial-gradient(85% 24%,29% 62%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #fff;background:radial-gradient(circle at 155% 143%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-8{clip:rect(0,320px,300px,280px);background:#fff;background:-webkit-radial-gradient(104% 93%,46% 52%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #FFF;background:radial-gradient(circle at 241% 154%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-9{clip:rect(0,360px,300px,320px);background:#fff;background:-webkit-radial-gradient(39% 18%,73% 52%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #FFF;background:radial-gradient(circle at 170% -219%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredded-paper .part-10{clip:rect(0,400px,300px,360px);background:#fff;background:-webkit-radial-gradient(77% 97%,29% 62%,rgba(0,0,0,0.3),rgba(255,255,255,0)) #fff;background:radial-gradient(circle at 217% 150%,rgb(134,134,134),rgba(255,255,255,0)) repeat scroll 0% 0% rgb(255,255,255);}
.shredder-holder{position:relative;top:350px;left:500px;width:450px;}
.shredder{font-weight:bold;font-size:1.7em;text-shadow:0 1px 1px rgba(0,0,0,0.3);padding:33px 0;box-sizing:border-box;-moz-box-sizing:border-box;position:absolute;background:#FF0012;width:100%;border-radius:2px;height:100px;box-shadow:0 0 30px rgba(0,0,0,0.3);z-index:9999999;background:rgba(176,189,186,1);text-align:center;color:#FFF;}
.shred-me{font-weight:bold;background:#61BAFF;color:#FFF;cursor:pointer;width:100%;display:inline-block;text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;padding:18px 10px;font-size:1.5em;position:absolute;top:236px;}
.shred-me:hover{background:rgb(30,112,176);}
.shred-me:active{box-shadow:inset 0 2px 10px rgba(0,0,0,0.3);}
.alert{padding:23px 20px 20px 28px;border-radius:100px;background:#BB4040;color:#FFF;font-size:2.6em;width:100px;height:100px;box-sizing:border-box;-moz-box-sizing:border-box;margin:10px auto;z-index:999;position:relative;top:52px;z-index:999;position:relative;top:52px;}
@-webkit-keyframes shredGo{10%{top:20px;}
12%{top:15px;}
30%{top:150px;}
32%{top:145px;}
60%{top:320px;}
62%{top:315px;}
68%{top:380px;}
100%{top:400px;}
}
@keyframes shredGo{10%{top:20px;}
12%{top:15px;}
30%{top:150px;}
32%{top:145px;}
60%{top:320px;}
62%{top:315px;}
68%{top:380px;}
100%{top:400px;}
}
@-webkit-keyframes shredShake{50%{top:352px;}
100%{top:348px;}
}
@keyframes shredShake{50%{top:352px;}
100%{top:348px;}
}
@-webkit-keyframes cover{30%{top:-25px;}
80%{height:20%;}
100%{top:0;height:0;}
}
@keyframes cover{30%{top:-25px;}
80%{height:20%;}
100%{height:0;top:-5px;}
}
@keyframes Animation1{20%{transform:scaleY(1.1) rotateX(5deg);}
50%{transform:scaleY(1.1) rotateX(-5deg);top:0;}
90%{transform:scaleY(1.1) rotateX(10deg);top:400px;}
100%{transform:scaleY(1.1) rotateX(10deg);top:1200px;}
}
@-webkit-keyframes Animation1{20%{-webkit-transform:scaleY(1.1) rotateX(5deg);}
50%{-webkit-transform:scaleY(1.1) rotateX(-5deg);top:0;}
90%{-webkit-transform:scaleY(1.1) rotateX(10deg);top:400px;}
100%{-webkit-transform:scaleY(1.1) rotateX(10deg);top:1200px;}
}
@keyframes Animation2{20%{transform:scaleY(1.1) rotateX(-5deg);}
50%{transform:scaleY(1.1) rotateX(-5deg);top:0;}
90%{transform:scaleY(1.1) rotateX(-10deg);top:400px;}
100%{transform:scaleY(1.1) rotateX(-10deg);top:1200px;}
}
@-webkit-keyframes Animation2{20%{-webkit-transform:scaleY(1.1) rotateX(-5deg);}
50%{-webkit-transform:scaleY(1.1) rotateX(-5deg);top:0;}
90%{-webkit-transform:scaleY(1.1) rotateX(-10deg);top:400px;}
100%{-webkit-transform:scaleY(1.1) rotateX(-10deg);top:1200px;}
}
/* ==================== IGNORE */
.go-back a{position:absolute;left:10px;top:10px;border-radius:5px;background:rgba(0,0,0,0.3);padding:10px 20px;color:#FFF;font-size:1.3em;font-weight:bold;text-decoration:none;padding:10px;}
.go-back a i{font-size:0.7em;margin:0 10px 0 0;}
.go-back a:hover{background:rgb(30,112,176);}
.go-back a:active{box-shadow:inset 0 2px 10px rgba(0,0,0,0.3);}

附件:下载该文件资源,减少时间成本(增值服务)