信通院-灾备 图表源码(在产品图表库基础上进行修改),开发逻辑和产品图表库一致
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. *{ margin: 0; padding: 0; }
  7. html{
  8. font-size: 16px;
  9. }
  10. body{
  11. position: absolute;
  12. width: 100%;
  13. height: 100%;
  14. overflow: hidden;
  15. background-color: #202a36;
  16. }
  17. #threeDBox {
  18. position: absolute;
  19. top:0;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. #back{
  25. position: absolute;
  26. right: 30%;
  27. top: 10%;
  28. display: none;
  29. width: 51px;
  30. height: 24px;
  31. cursor: pointer;
  32. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAAAyCAYAAABbPiUzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkMjdmM2UyYi1hMjkyLTRkYjYtOGEwMC05YzYxMmQzMzQzYjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0U1RjA2Qjc4NjMxMTFFQkExRTE5NjYxRkEyRjg0MjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0U1RjA2QjY4NjMxMTFFQkExRTE5NjYxRkEyRjg0MjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDI3ZjNlMmItYTI5Mi00ZGI2LThhMDAtOWM2MTJkMzM0M2I0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQyN2YzZTJiLWEyOTItNGRiNi04YTAwLTljNjEyZDMzNDNiNCIvPiA8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);
  33. background-size: 100% 100%;
  34. }
  35. /**/
  36. .sk-cube-grid {
  37. width: 2rem;
  38. height: 2rem;
  39. position: absolute;
  40. left: 50%;
  41. top: 50%;
  42. }
  43. .sk-cube-grid .sk-cube {
  44. width: 33%;
  45. height: 33%;
  46. background-color: #92e185;
  47. float: left;
  48. -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  49. animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  50. }
  51. .sk-cube-grid .sk-cube1 {
  52. -webkit-animation-delay: 0.2s;
  53. animation-delay: 0.2s; }
  54. .sk-cube-grid .sk-cube2 {
  55. -webkit-animation-delay: 0.3s;
  56. animation-delay: 0.3s; }
  57. .sk-cube-grid .sk-cube3 {
  58. -webkit-animation-delay: 0.4s;
  59. animation-delay: 0.4s; }
  60. .sk-cube-grid .sk-cube4 {
  61. -webkit-animation-delay: 0.1s;
  62. animation-delay: 0.1s; }
  63. .sk-cube-grid .sk-cube5 {
  64. -webkit-animation-delay: 0.2s;
  65. animation-delay: 0.2s; }
  66. .sk-cube-grid .sk-cube6 {
  67. -webkit-animation-delay: 0.3s;
  68. animation-delay: 0.3s; }
  69. .sk-cube-grid .sk-cube7 {
  70. -webkit-animation-delay: 0s;
  71. animation-delay: 0s; }
  72. .sk-cube-grid .sk-cube8 {
  73. -webkit-animation-delay: 0.1s;
  74. animation-delay: 0.1s; }
  75. .sk-cube-grid .sk-cube9 {
  76. -webkit-animation-delay: 0.2s;
  77. animation-delay: 0.2s; }
  78. @-webkit-keyframes sk-cubeGridScaleDelay {
  79. 0%, 70%, 100% {
  80. -webkit-transform: scale3D(1, 1, 1);
  81. transform: scale3D(1, 1, 1);
  82. } 35% {
  83. -webkit-transform: scale3D(0, 0, 1);
  84. transform: scale3D(0, 0, 1);
  85. }
  86. }
  87. @keyframes sk-cubeGridScaleDelay {
  88. 0%, 70%, 100% {
  89. -webkit-transform: scale3D(1, 1, 1);
  90. transform: scale3D(1, 1, 1);
  91. } 35% {
  92. -webkit-transform: scale3D(0, 0, 1);
  93. transform: scale3D(0, 0, 1);
  94. }
  95. }
  96. </style>
  97. <title></title>
  98. </head>
  99. <body>
  100. <div id="threeDBox"></div>
  101. <!-- <div id="back"></div> -->
  102. </body>
  103. </html>