Add Genshin Impact startup to xlog using CSS.

First, find the "Genshin Impact" logo in SVG format online to ensure that the logo is high-definition on any screen.

Next, customize the CSS for the "xlog" as follows:

body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(https://xlog.app/cdn-cgi/image/width=750,quality=75,format=auto,onerror=redirect/https://ipfs.xlog.app/ipfs/bafkreidmbrmalshvlprtzt7qdbk4xtolpvpstvunjogl6o373oplmhcrga);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
    -webkit-transition: fadeOut 3s;
    transition: fadeOut 3s;
    pointer-events: none;
}
@keyframes fadeOut {
  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
  }
}

Because the .x-page is occupied by the previous "Ram and Rem" animation, this tutorial will modify the body instead. This means adding a pseudo-element to the body with a background color and image, making it cover the entire screen, setting a higher z-index, and using pointer-events: none; to prevent it from blocking content and making it unclickable. The fade-out animation uses animation-fill-mode: forwards; to keep the final frame, which is fully transparent. The fade-out animation starts at 50% and lasts for 3s, so the logo will be displayed for 1.5s before fading out, providing a better user experience.

In fact, this technique can be used not only for "xlog" but also for any program as long as it does not conflict with the original styles. Just copy and paste the CSS code as long as it is compatible!