splash.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. display: flex;
  7. align-items: center;
  8. justify-content: center;
  9. height: 100vh;
  10. margin: 0;
  11. padding: 0;
  12. font-family: Arial, sans-serif;
  13. cursor: default;
  14. }
  15. .logo {
  16. font-size: 32px;
  17. font-weight: bold;
  18. text-transform: uppercase;
  19. }
  20. .letter {
  21. opacity: 0;
  22. color: lightgreen;
  23. }
  24. .fade-in-animation {
  25. animation: fade-in 4s infinite;
  26. }
  27. @keyframes fade-in {
  28. 0% {
  29. opacity: 0;
  30. color: lightgreen;
  31. }
  32. 50% {
  33. opacity: 1;
  34. color: lightblue;
  35. }
  36. 100% {
  37. opacity: 0;
  38. }
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div class="logo">
  44. <span class="letter">O</span>
  45. <span class="letter">p</span>
  46. <span class="letter">e</span>
  47. <span class="letter">n</span>
  48. <span class="letter">I</span>
  49. <span class="letter">M</span>
  50. </div>
  51. <script>
  52. const letters = document.querySelectorAll(".letter");
  53. function animateLetters() {
  54. letters.forEach((letter, index) => {
  55. setTimeout(() => {
  56. letter.classList.add("fade-in-animation");
  57. }, index * 300);
  58. });
  59. }
  60. animateLetters();
  61. </script>
  62. </body>
  63. </html>