今天给大家分享一款基于css3和jquery实现的动画弹出层。这款弹出层初页面面一个显示弹出层按钮。单击该按钮时,弹出层以非常炫的动画形式出现。弹出层有关闭按钮,单击半闭按钮,弹出层关闭。效果图如下:
实现的代码。
html代码:
- <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代码:
- @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;
- }
到此这篇关于一款基于css3和jquery如何实现的动画显示弹出层按钮好代码教程就介绍到这了。创富靠坚持,坚持为梦想,用勤劳的双手和先进的思想来实现心中的梦想。更多相关一款基于css3和jquery如何实现的动画显示弹出层按钮好代码教程内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!