index.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>MaxKey单点登录认证系统</title>
  6. <base href="/">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <meta http-equiv="x-ua-compatible" content="ie=edge">
  9. <title id="maxkey_title" name="description">MaxKey-业界领先的IAM身份管理和认证产品</title>
  10. <meta http-equiv="description" content="MaxKey Single Sign-On">
  11. <link rel="icon" type="image/x-icon" href="favicon.ico">
  12. <!-- Apple Touch Icon -->
  13. <!-- <link rel="apple-touch-icon" href="custom-icon.png"> -->
  14. <style type="text/css">
  15. #preloader {
  16. position: fixed;
  17. top: 0;
  18. left: 0;
  19. z-index: 9999;
  20. width: 100%;
  21. height: 100%;
  22. overflow: hidden;
  23. background: #49a9ee;
  24. transition: opacity .65s
  25. }
  26. .cs-loader {
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. width: 100%;
  31. height: 100%
  32. }
  33. .cs-loader-inner {
  34. position: absolute;
  35. top: 50%;
  36. width: 100%;
  37. color: #fff;
  38. text-align: center;
  39. transform: translateY(-50%)
  40. }
  41. .cs-loader-inner label {
  42. display: inline-block;
  43. font-size: 20px;
  44. opacity: 0
  45. }
  46. @keyframes lol {
  47. 0% {
  48. transform: translateX(-300px);
  49. opacity: 0
  50. }
  51. 33% {
  52. transform: translateX(0);
  53. opacity: 1
  54. }
  55. 66% {
  56. transform: translateX(0);
  57. opacity: 1
  58. }
  59. 100% {
  60. transform: translateX(300px);
  61. opacity: 0
  62. }
  63. }
  64. .cs-loader-inner label:nth-child(6) {
  65. animation: lol 3s infinite ease-in-out
  66. }
  67. .cs-loader-inner label:nth-child(5) {
  68. animation: lol 3s .1s infinite ease-in-out
  69. }
  70. .cs-loader-inner label:nth-child(4) {
  71. animation: lol 3s .2s infinite ease-in-out
  72. }
  73. .cs-loader-inner label:nth-child(3) {
  74. animation: lol 3s .3s infinite ease-in-out
  75. }
  76. .cs-loader-inner label:nth-child(2) {
  77. animation: lol 3s .4s infinite ease-in-out
  78. }
  79. .cs-loader-inner label:nth-child(1) {
  80. animation: lol 3s .5s infinite ease-in-out
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <div id="root"></div>
  86. <div id="preloader">
  87. <div class="cs-loader">
  88. <div class="cs-loader-inner">
  89. <label> ●</label>
  90. <label> ●</label>
  91. <label> ●</label>
  92. <label> ●</label>
  93. <label> ●</label>
  94. <label> ●</label>
  95. </div>
  96. </div>
  97. </div>
  98. <script>
  99. const e=document.getElementById("preloader")
  100. setTimeout(()=>{
  101. e.style.display="none"
  102. },2500)
  103. </script>
  104. </body>
  105. </html>