今天给大家分享一款基于css3和jquery实现的动画弹出层。这款弹出层初页面面一个显示弹出层按钮。单击该按钮时，弹出层以非常炫的动画形式出现。弹出层有关闭按钮，单击半闭按钮，弹出层关闭。效果图如下：

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板 <divclass="papersheet"> <> <divclass="papersheet__trigger"> <> <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> <> <divclass="papersheet__face-itemanimatedfadeInUp"> <imgsrc="128.jpg"alt=""/> </div> <> <divclass="papersheet__face-itemanimatedfadeInUp"> <imgsrc="129.jpg"alt=""/> </div> <> <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; }