一款基于css3和jquery如何实现的动画显示弹出层按钮好代码教程

互联网
早上好！感谢你陪我走过每一个日子，愿有我的日子你每天都精彩，每步都平安，每刻都快乐，每分都如意，每秒都幸福。

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="papersheet">
  2. <!--ActionTrigger-->
  3. <divclass="papersheet__trigger">
  4. <!--Icon-->
  5. <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>
  6. </div>
  7. <!--Face1-->
  8. <divclass="papersheet__face-itemanimatedfadeInUp">
  9. <imgsrc="128.jpg"alt=""/>
  10. </div>
  11. <!--Face2-->
  12. <divclass="papersheet__face-itemanimatedfadeInUp">
  13. <imgsrc="129.jpg"alt=""/>
  14. </div>
  15. <!--Face2-->
  16. <divclass="papersheet__face-itemanimatedfadeInUp">
  17. <imgsrc="130.jpg"alt=""/>
  18. </div>
  19. </div>
  20. <scriptsrc='jquery.js'></script>
  21. <script>
  22. _papersheet=$('.papersheet');
  23. _trigger=$('.papersheet__trigger');
  24. _trigger.click(function(){
  25. if(_papersheet.hasClass('opened')){
  26. $(this).parent('.papersheet').stop().removeClass('opened');
  27. }else{
  28. $(this).parent('.papersheet').stop().addClass('opened');
  29. }
  30. });
  31. //@sourceURL=pen.js
  32. </script>

　　css3代码：

CSS Code复制内容到剪贴板
  1. @importurl("http://daneden.github.io/animate.css/animate.min.css");
  2. :root
  3. {
  4. width:100%;
  5. height:100%;
  6. }
  7. body
  8. {
  9. width:100%;
  10. height:100%;
  11. display:-webkit-flex;
  12. display:-ms-flexbox;
  13. display:flex;
  14. -webkit-align-items:center;
  15. -ms-flex-align:center;
  16. align-items:center;
  17. -webkit-justify-content:center;
  18. -ms-flex-pack:center;
  19. justify-content:center;
  20. overflow:hidden;
  21. background-color:#263238;
  22. }
  23. .papersheet
  24. {
  25. position:relative;
  26. overflow:hidden;
  27. text-align:center;
  28. -moz-box-sizing:border-box;
  29. box-sizing:border-box;
  30. -webkit-transition:all200ms;
  31. transition:all200ms;
  32. width:100%;
  33. height:100%;
  34. max-width:50%;
  35. min-width:50rem;
  36. max-height:50%;
  37. min-height:20rem;
  38. margin:0auto;
  39. display:-webkit-flex;
  40. display:-ms-flexbox;
  41. display:flex;
  42. -webkit-align-items:center;
  43. -ms-flex-align:center;
  44. align-items:center;
  45. -webkit-justify-content:center;
  46. -ms-flex-pack:center;
  47. justify-content:center;
  48. }
  49. .papersheet.opened
  50. {
  51. -webkit-transition:all900ms;
  52. transition:all900ms;
  53. box-shadow:0px5px20pxrgba(0,0,0,0.5);
  54. }
  55. .papersheet__trigger
  56. {
  57. z-index:1;
  58. display:inline-block;
  59. padding:2rem;
  60. border-radius:50%;
  61. position:absolute;
  62. background-color:transparent;
  63. top:50%;
  64. left:50%;
  65. -webkit-transform:translate(-50%,-50%);
  66. -ms-transform:translate(-50%,-50%);
  67. transform:translate(-50%,-50%);
  68. -webkit-transition:all800mscubic-bezier(0.19,1,0.22,1);
  69. transition:all800mscubic-bezier(0.19,1,0.22,1);
  70. cursor:pointer;
  71. }
  72. .opened.papersheet__trigger
  73. {
  74. background-color:#eceff1;
  75. top:10%;
  76. }
  77. .papersheet__trigger:hover
  78. {
  79. box-shadow:0px5px20pxrgba(0,0,0,0.5);
  80. }
  81. .papersheet__trigger:active:before
  82. {
  83. background-color:#d5d5d5;
  84. }
  85. .papersheet__trigger:before
  86. {
  87. content:"";
  88. background-color:#eceff1;
  89. display:block;
  90. position:absolute;
  91. border-radius:50%;
  92. top:50%;
  93. left:50%;
  94. bottombottom:50%;
  95. rightright:50%;
  96. width:6rem;
  97. height:6rem;
  98. z-index:0;
  99. pointer-events:none;
  100. -webkit-transform:translate(-50%,-50%);
  101. -ms-transform:translate(-50%,-50%);
  102. transform:translate(-50%,-50%);
  103. -webkit-transition-delay:2s;
  104. transition-delay:2s;
  105. -webkit-transition:all400mscubic-bezier(0.165,0.84,0.44,1);
  106. transition:all400mscubic-bezier(0.165,0.84,0.44,1);
  107. }
  108. .opened.papersheet__trigger:before
  109. {
  110. width:3000px;
  111. height:3000px;
  112. -webkit-transition:all2.5scubic-bezier(0.165,0.84,0.44,1);
  113. transition:all2.5scubic-bezier(0.165,0.84,0.44,1);
  114. }
  115. .papersheet__trigger-icon
  116. {
  117. fill:#37474f;
  118. vertical-align:bottombottom;
  119. -webkit-transform:rotate(45deg);
  120. -ms-transform:rotate(45deg);
  121. transform:rotate(45deg);
  122. -webkit-transition:all800mscubic-bezier(0.19,1,0.22,1);
  123. transition:all800mscubic-bezier(0.19,1,0.22,1);
  124. -webkit-transition-delay:50ms;
  125. transition-delay:50ms;
  126. width:1.8rem;
  127. height:1.8rem;
  128. }
  129. .opened.papersheet__trigger-icon
  130. {
  131. -webkit-transform:rotate(-360deg);
  132. -ms-transform:rotate(-360deg);
  133. transform:rotate(-360deg);
  134. }
  135. .papersheet__face-item
  136. {
  137. border-radius:50%;
  138. margin:01.5rem;
  139. z-index:1;
  140. height:6rem;
  141. width:6rem;
  142. display:none;
  143. overflow:hidden;
  144. }
  145. .papersheet__face-item:nth-child(2)
  146. {
  147. -webkit-animation-delay:50ms;
  148. animation-delay:50ms;
  149. }
  150. .papersheet__face-item:nth-child(3)
  151. {
  152. -webkit-animation-delay:150ms;
  153. animation-delay:150ms;
  154. }
  155. .papersheet__face-item:nth-child(4)
  156. {
  157. -webkit-animation-delay:250ms;
  158. animation-delay:250ms;
  159. }
  160. .papersheet__face-itemimg
  161. {
  162. max-width:100%;
  163. }
  164. .opened.papersheet__face-item
  165. {
  166. -webkit-transform:translateX(60%);
  167. -ms-transform:translateX(60%);
  168. transform:translateX(60%);
  169. display:block;
  170. }

到此这篇关于一款基于css3和jquery如何实现的动画显示弹出层按钮好代码教程就介绍到这了。创富靠坚持，坚持为梦想，用勤劳的双手和先进的思想来实现心中的梦想。更多相关一款基于css3和jquery如何实现的动画显示弹出层按钮好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例