给web请求加遮罩动画

雨点打透心脏的1/2处 2022-10-03 00:33 269阅读 0赞

效果预览:

1468106-20190403142606032-795435746.png

css:

ContractedBlock.gif ExpandedBlockStart.gif

  1. /*#fountainG{
  2. position:relative;
  3. margin:10% auto;
  4. width:240px;
  5. height:29px
  6. }*/
  7. #fountainG{
  8. position:relative;
  9. filter:Alpha(opacity=30);
  10. -moz-opacity:0.3;
  11. -khtml-opacity:0.3;
  12. opacity:0.3;
  13. background-color:#000;
  14. width:100%;
  15. height:100%;
  16. z-index:1200;
  17. position:fixed;
  18. left:0;
  19. top:0;
  20. right:0;
  21. bottom:0;
  22. display:none;
  23. overflow:hidden;
  24. }
  25. .fountainG{
  26. position:absolute;
  27. top:45%;
  28. margin-left: 45%;
  29. background-color:#33cc99;
  30. width:29px;
  31. height:29px;
  32. -webkit-animation:bounce_fountainG 1.3s infinite normal;
  33. -moz-animation:bounce_fountainG 1.3s infinite normal;
  34. -o-animation:bounce_fountainG 1.3s infinite normal;
  35. -ms-animation:bounce_fountainG 1.3s infinite normal;
  36. animation:bounce_fountainG 1.3s infinite normal;
  37. -moz-transform:scale(.3);
  38. -webkit-transform:scale(.3);
  39. -ms-transform:scale(.3);
  40. -o-transform:scale(.3);
  41. transform:scale(.3);
  42. border-radius:19px;
  43. }
  44. #fountainG_1{
  45. left:0;
  46. -moz-animation-delay:0.52s;
  47. -webkit-animation-delay:0.52s;
  48. -ms-animation-delay:0.52s;
  49. -o-animation-delay:0.52s;
  50. animation-delay:0.52s;
  51. }
  52. #fountainG_2{
  53. left:30px;
  54. -moz-animation-delay:0.65s;
  55. -webkit-animation-delay:0.65s;
  56. -ms-animation-delay:0.65s;
  57. -o-animation-delay:0.65s;
  58. animation-delay:0.65s;
  59. }
  60. #fountainG_3{
  61. left:60px;
  62. -moz-animation-delay:0.78s;
  63. -webkit-animation-delay:0.78s;
  64. -ms-animation-delay:0.78s;
  65. -o-animation-delay:0.78s;
  66. animation-delay:0.78s;
  67. }
  68. #fountainG_4{
  69. left:90px;
  70. -moz-animation-delay:0.91s;
  71. -webkit-animation-delay:0.91s;
  72. -ms-animation-delay:0.91s;
  73. -o-animation-delay:0.91s;
  74. animation-delay:0.91s;
  75. }
  76. #fountainG_5{
  77. left:120px;
  78. -moz-animation-delay:1.04s;
  79. -webkit-animation-delay:1.04s;
  80. -ms-animation-delay:1.04s;
  81. -o-animation-delay:1.04s;
  82. animation-delay:1.04s;
  83. }
  84. #fountainG_6{
  85. left:150px;
  86. -moz-animation-delay:1.17s;
  87. -webkit-animation-delay:1.17s;
  88. -ms-animation-delay:1.17s;
  89. -o-animation-delay:1.17s;
  90. animation-delay:1.17s;
  91. }
  92. #fountainG_7{
  93. left:180px;
  94. -moz-animation-delay:1.3s;
  95. -webkit-animation-delay:1.3s;
  96. -ms-animation-delay:1.3s;
  97. -o-animation-delay:1.3s;
  98. animation-delay:1.3s;
  99. }
  100. #fountainG_8{
  101. left:210px;
  102. -moz-animation-delay:1.43s;
  103. -webkit-animation-delay:1.43s;
  104. -ms-animation-delay:1.43s;
  105. -o-animation-delay:1.43s;
  106. animation-delay:1.43s;
  107. }
  108. @-moz-keyframes bounce_fountainG{
  109. 0%{
  110. -moz-transform:scale(1);
  111. background-color:#33cc99;
  112. }
  113. 100%{
  114. -moz-transform:scale(.3);
  115. background-color:#0099cc;
  116. }
  117. }
  118. @-webkit-keyframes bounce_fountainG{
  119. 0%{
  120. -webkit-transform:scale(1);
  121. background-color:#33cc99;
  122. }
  123. 100%{
  124. -webkit-transform:scale(.3);
  125. background-color:#0099cc;
  126. }
  127. }
  128. @-ms-keyframes bounce_fountainG{
  129. 0%{
  130. -ms-transform:scale(1);
  131. background-color:#33cc99;
  132. }
  133. 100%{
  134. -ms-transform:scale(.3);
  135. background-color:#0099cc;
  136. }
  137. }
  138. @-o-keyframes bounce_fountainG{
  139. 0%{
  140. -o-transform:scale(1);
  141. background-color:#33cc99;
  142. }
  143. 100%{
  144. -o-transform:scale(.3);
  145. background-color:#0099cc;
  146. }
  147. }
  148. @keyframes bounce_fountainG{
  149. 0%{
  150. transform:scale(1);
  151. background-color:#33cc99;
  152. }
  153. 100%{
  154. transform:scale(.3);
  155. background-color:#0099cc;
  156. }
  157. }

html:

  1. <div id="fountainG">
  2. <div id="fountainG_1" class="fountainG">
  3. </div>
  4. <div id="fountainG_2" class="fountainG">
  5. </div>
  6. <div id="fountainG_3" class="fountainG">
  7. </div>
  8. <div id="fountainG_4" class="fountainG">
  9. </div>
  10. <div id="fountainG_5" class="fountainG">
  11. </div>
  12. <div id="fountainG_6" class="fountainG">
  13. </div>
  14. <div id="fountainG_7" class="fountainG">
  15. </div>
  16. <div id="fountainG_8" class="fountainG">
  17. </div>
  18. </div>

js:

  1. //加载动画效果
  2. function showLoad(){
  3. $('#fountainG').show();
  4. }
  5. //隐藏动画效果
  6. function hiddenLoad(){
  7. $('#fountainG').hide();
  8. }
  9. function resultAjax(url, data) {
  10. var result;
  11. $.ajax({
  12. url: $.contextPath() + url,
  13. type: 'get',
  14. async: true, //注意这里
  15. cache: false,
  16. contentType: 'application/json',
  17. data: data,
  18. dataType: 'json',
  19. beforeSend: function (){
  20. //ajax刷新前加载load动画
  21. showLoad();
  22. },
  23. success: function(data) {
  24. //TODO
  25. },
  26. error: function(data) {
  27. commonAlert('出现了一点小问题','error');
  28. },
  29. complete:function () {
  30. //完成以后隐藏load动画
  31. hiddenLoad();
  32. }
  33. });
  34. return result;
  35. }

转载于:https://www.cnblogs.com/UncleWang001/p/10648634.html

发表评论

表情:
评论列表 (有 0 条评论,269人围观)

还没有评论,来说两句吧...

相关阅读