index.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <link rel="stylesheet" href="/iconfont.css" />
  7. <link rel="stylesheet" href="/animate.css" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <title>后台管理系统</title>
  10. <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.js"></script>
  11. <script>
  12. window.process = {};
  13. </script>
  14. </head>
  15. <body>
  16. <div id="app">
  17. <style>
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. html,
  23. body {
  24. width: 100%;
  25. height: 100%;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. background: #000;
  30. overflow: hidden;
  31. font-family: "Reggae One", cursive;
  32. }
  33. p {
  34. font-size: 12vw;
  35. overflow: hidden;
  36. -webkit-text-stroke: 3px #7272a5;
  37. }
  38. p::before {
  39. content: " ";
  40. width: 100%;
  41. height: 100%;
  42. position: absolute;
  43. left: 0;
  44. top: 0;
  45. background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
  46. mix-blend-mode: multiply;
  47. }
  48. p::after {
  49. content: "";
  50. background: radial-gradient(circle, #fff, #000 50%);
  51. background-size: 25% 25%;
  52. position: absolute;
  53. top: -100%;
  54. left: -100%;
  55. right: 0;
  56. bottom: 0;
  57. mix-blend-mode: color-dodge;
  58. animation: mix 2s linear infinite;
  59. }
  60. @keyframes mix {
  61. to {
  62. transform: translate(50%, 50%);
  63. }
  64. }
  65. </style>
  66. <div class="g-container">
  67. <p>Pure-Admin</p>
  68. </div>
  69. </div>
  70. <script type="module" src="/src/main.ts"></script>
  71. </body>
  72. </html>