First, find the original Genshin Impact logo's svg online to ensure that the Genshin Impact logo is high-definition on any screen.
Next is to customize the css for 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 .x-page has been occupied by my previous Ram and Rem GIF, so this tutorial can only manipulate the body, which is to add a background color and background image to the pseudo-element of body, and then make it occupy the entire screen with a higher z-index. Then use pointer-events: none; to avoid the problem of high-level occlusion of content that cannot be clicked. The fade-out animation uses animation-fill-mode: forwards; to keep the animation at the last 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, which will provide a better experience.
In fact, not only xlog can be used, css is universal. As long as it does not conflict with the original style, you can copy and use it for any program!!!