前言


本内容非原创 全部基于这个例子 仅做了适当微调
https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html

之前已经实现过3种加载动画了,链接
https://zzzmh.cn/single?id=51
https://zzzmh.cn/single?id=53
https://zzzmh.cn/single?id=115


今天是在网上看到这个3D立体箱子效果挺好的,于是再折腾一个新的加载动画效果,顺便用刚学会的requestAnimationFrame做个渐隐动画
https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html


效果图


在线源码:
https://gitee.com/tczmh/loading-html-css3-box
线上演示:
(模拟3秒后加载完成,动画渐隐)
https://tczmh.gitee.io/loading-html-css3-box


折腾


index.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>3D立方体Loading加载动画 - HTML5 CSS3</title>
  6. <style>
  7. html, body {
  8. margin: 0;
  9. }
  10. /*
  11. * 这里有2个方法实现
  12. * 1 是用下面这段 position: fixed; 一般都是用这个,对原来的内容无要求,缺点是IOS系统微信内置浏览器会遮挡方块。。。目测是微信bug,暂时无解
  13. * 2 是用 display: flex; 曲线救国,缺点是width和height必须对其窗口,如果html body有margin,就会顶到屏幕外面,出现滚动条,
  14. * 且主页内容会被loading-background顶出屏幕
  15. */
  16. #loading-background {
  17. background-color: #dedede;
  18. width: 100%;
  19. height: 100%;
  20. position: fixed;
  21. }
  22. #loading{
  23. position: absolute;
  24. left: 50%;
  25. top: 50%;
  26. transform: translate(-50%,-50%);
  27. }
  28. .base {
  29. height: 9rem;
  30. padding: 3rem;
  31. width: 9rem;
  32. transform: rotateX(45deg) rotateZ(45deg);
  33. transform-style: preserve-3d;
  34. }
  35. .cube,
  36. .cube:after,
  37. .cube:before {
  38. content: '';
  39. float: left;
  40. height: 3rem;
  41. position: absolute;
  42. width: 3rem;
  43. z-index: 99999;
  44. }
  45. .cube {
  46. background-color: #05afd1;
  47. position: relative;
  48. transform: translateZ(3em);
  49. transform-style: preserve-3d;
  50. transition: .25s;
  51. box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
  52. animation: anim 1s infinite;
  53. }
  54. .cube:after {
  55. background-color: #049dbc;
  56. transform: rotateX(-90deg) translateY(3em);
  57. transform-origin: 100% 100%;
  58. }
  59. .cube:before {
  60. background-color: #048ca7;
  61. transform: rotateY(90deg) translateX(3em);
  62. transform-origin: 100% 0;
  63. }
  64. .cube:nth-child(1) {
  65. animation-delay: 0.05s;
  66. }
  67. .cube:nth-child(2) {
  68. animation-delay: 0.1s;
  69. }
  70. .cube:nth-child(3) {
  71. animation-delay: 0.15s;
  72. }
  73. .cube:nth-child(4) {
  74. animation-delay: 0.2s;
  75. }
  76. .cube:nth-child(5) {
  77. animation-delay: 0.25s;
  78. }
  79. .cube:nth-child(6) {
  80. animation-delay: 0.3s;
  81. }
  82. .cube:nth-child(7) {
  83. animation-delay: 0.35s;
  84. }
  85. .cube:nth-child(8) {
  86. animation-delay: 0.4s;
  87. }
  88. .cube:nth-child(9) {
  89. animation-delay: 0.45s;
  90. }
  91. @keyframes anim {
  92. 50% {
  93. transform: translateZ(0.5em);
  94. }
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <!-- 本内容非原创 全部基于这个例子 仅做了适当微调 https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html -->
  100. <div id="loading-background">
  101. <div id="loading">
  102. <div class="base">
  103. <div class="cube"></div>
  104. <div class="cube"></div>
  105. <div class="cube"></div>
  106. <div class="cube"></div>
  107. <div class="cube"></div>
  108. <div class="cube"></div>
  109. <div class="cube"></div>
  110. <div class="cube"></div>
  111. <div class="cube"></div>
  112. </div>
  113. </div>
  114. </div>
  115. <script>
  116. const loading = document.querySelector('#loading');
  117. const background = document.querySelector('#loading-background');
  118. let opacity = 100;
  119. /** 渐隐动画 每一帧减少1%透明度 1秒60帧 100帧后消失 */
  120. function loadingFadeOut() {
  121. if (opacity > 0) {
  122. requestAnimationFrame(function () {
  123. opacity -= 2;
  124. loading.style.opacity = opacity / 100;
  125. loadingFadeOut()
  126. });
  127. } else {
  128. document.body.removeChild(background);
  129. }
  130. }
  131. // 模拟3秒后 执行加载完成
  132. setTimeout(function () {
  133. loadingFadeOut();
  134. }, 3000)
  135. </script>
  136. </body>
  137. </html>

w
其实没什么好讲的,都在代码和注释里了。
1. style可以加到css文件,放head里
2. div 放在body最前面第一行
3. 页面加载完成后调用 loadingFadeOut 方法


注意
有极小概率出现执行不到这行代码
document.body.removeChild(loading);
会导致遮罩层永远不消失
保险起见可以额外加一个settimeout
例如10秒后强制隐藏遮罩层
这里就不做演示了 略 ~



END


在线源码:
https://gitee.com/tczmh/loading-html-css3-box
线上演示:
(模拟3秒后加载完成,动画渐隐)
https://tczmh.gitee.io/loading-html-css3-box