今天给大家分享一款基于css3和jquery实现的动画弹出层。这款弹出层初页面面一个显示弹出层按钮。单击该按钮时，弹出层以非常炫的动画形式出现。弹出层有关闭按钮，单击半闭按钮，弹出层关闭。效果图如下：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板
<divclass="papersheet"><!--ActionTrigger--><divclass="papersheet__trigger"><!--Icon--><svgclass="papersheet__trigger-icon"viewbox="002424"><gtransform="scale(0.0230.023)"><pathd="M1014.662822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65310.644-310.65c0.004-0.0040.008-0.0060.012-0.0103.344-3.3465.762-7.2547.312-11.4164.246-11.3761.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.161.55-8.0703.968-11.4187.3100.004-0.0040.006-0.0080.010l-310.648310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-33.837.32l-146.748146.748c-9.1489.148-11.56822.452-7.32233.8281.5524.163.978.0727.31211.4160.0040.0020.0060.0060.0100.010l310.65310.648-310.65310.652c-0.0020.004-0.0060.006-0.0080.010-3.3423.346-5.767.254-7.31411.414-4.24811.376-1.82624.6827.32233.83l146.748146.746c9.159.14822.45211.56833.837.3224.16-1.5528.070-3.9711.416-7.3120.002-0.0040.006-0.0060.010-0.010l310.648-310.65310.648310.65c0.0040.0020.0080.0060.0120.0083.3483.3447.2545.76211.4147.31411.3784.24624.6841.82633.828-7.322l146.746-146.748c9.148-9.14811.57-22.4547.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z"></path></g></svg></div><!--Face1--><divclass="papersheet__face-itemanimatedfadeInUp"><imgsrc="128.jpg"alt=""/></div><!--Face2--><divclass="papersheet__face-itemanimatedfadeInUp"><imgsrc="129.jpg"alt=""/></div><!--Face2--><divclass="papersheet__face-itemanimatedfadeInUp"><imgsrc="130.jpg"alt=""/></div></div><scriptsrc='jquery.js'></script><script>_papersheet=$('.papersheet');_trigger=$('.papersheet__trigger');_trigger.click(function(){if(_papersheet.hasClass('opened')){$(this).parent('.papersheet').stop().removeClass('opened');}else{$(this).parent('.papersheet').stop().addClass('opened');}});//@sourceURL=pen.js</script> css3代码：
CSS Code复制内容到剪贴板
@importurl("http://daneden.github.io/animate.css/animate.min.css");:root{width:100%;height:100%;}body{width:100%;height:100%;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;background-color:#263238;}.papersheet{position:relative;overflow:hidden;text-align:center;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all200ms;transition:all200ms;width:100%;height:100%;max-width:50%;min-width:50rem;max-height:50%;min-height:20rem;margin:0auto;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.papersheet.opened{-webkit-transition:all900ms;transition:all900ms;box-shadow:0px5px20pxrgba(0,0,0,0.5);}.papersheet__trigger{z-index:1;display:inline-block;padding:2rem;border-radius:50%;position:absolute;background-color:transparent;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:all800mscubic-bezier(0.19,1,0.22,1);transition:all800mscubic-bezier(0.19,1,0.22,1);cursor:pointer;}.opened.papersheet__trigger{background-color:#eceff1;top:10%;}.papersheet__trigger:hover{box-shadow:0px5px20pxrgba(0,0,0,0.5);}.papersheet__trigger:active:before{background-color:#d5d5d5;}.papersheet__trigger:before{content:"";background-color:#eceff1;display:block;position:absolute;border-radius:50%;top:50%;left:50%;bottombottom:50%;rightright:50%;width:6rem;height:6rem;z-index:0;pointer-events:none;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition-delay:2s;transition-delay:2s;-webkit-transition:all400mscubic-bezier(0.165,0.84,0.44,1);transition:all400mscubic-bezier(0.165,0.84,0.44,1);}.opened.papersheet__trigger:before{width:3000px;height:3000px;-webkit-transition:all2.5scubic-bezier(0.165,0.84,0.44,1);transition:all2.5scubic-bezier(0.165,0.84,0.44,1);}.papersheet__trigger-icon{fill:#37474f;vertical-align:bottombottom;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all800mscubic-bezier(0.19,1,0.22,1);transition:all800mscubic-bezier(0.19,1,0.22,1);-webkit-transition-delay:50ms;transition-delay:50ms;width:1.8rem;height:1.8rem;}.opened.papersheet__trigger-icon{-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}.papersheet__face-item{border-radius:50%;margin:01.5rem;z-index:1;height:6rem;width:6rem;display:none;overflow:hidden;}.papersheet__face-item:nth-child(2){-webkit-animation-delay:50ms;animation-delay:50ms;}.papersheet__face-item:nth-child(3){-webkit-animation-delay:150ms;animation-delay:150ms;}.papersheet__face-item:nth-child(4){-webkit-animation-delay:250ms;animation-delay:250ms;}.papersheet__face-itemimg{max-width:100%;}.opened.papersheet__face-item{-webkit-transform:translateX(60%);-ms-transform:translateX(60%);transform:translateX(60%);display:block;} 
