最初に、原神の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です。これにより、ロゴが最初に1.5s表示され、その後フェードアウトすることでより良い体験が得られます。
実際、xlogだけでなく、cssは汎用的です。元のスタイルと競合しなければ、どのプログラムでもコピーして使用できます！！！