使用css给xlog加上原神启动

首先在网上找到原神logo的svg，确保任何屏幕原神都是高清的。

其次就是给xlog自定义css，具体如下：

Copy
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;
}
}

因为.x-page被我上一个加入拉姆雷姆动图给占用了，所以这期教程只好在body上动手脚了，就是给body伪元素加背景色和背景图，然后使其占满屏幕，层级设置的高一点，再使用pointer-events: none;来避免层级过高遮挡内容使其无法点击的问题，淡出动画使用animation-fill-mode: forwards;使得动画最终保持最后一帧也就是全透明。淡出动画从50%开始动画时间3s，这样 logo 会先显示1.5s才后再淡出体验会好很多。

其实不止xlog能用，css嘛都是通用的，不管啥程序只要不和原始样式冲突，复制过去都能用！！！