使用 CSS 為 xlog 加上原神啟動

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

其次就是給xlog自定義css，具體如下：

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嘛都是通用的，不管啥程序只要不和原始樣式衝突，複製過去都能用！！！