最初に、原神の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の擬似要素に背景色と背景画像を追加し、画面いっぱいに広がるようにします。また、z-index を高く設定し、pointer-events: none;を使用して、高いレベルでコンテンツを覆い隠すことによるクリックの問題を回避します。フェードアウトアニメーションでは、animation-fill-mode: forwards;を使用して、アニメーションの最後のフレームである完全に透明な状態を維持します。フェードアウトアニメーションは50%から始まり、アニメーション時間は3sです。これにより、ロゴが最初に表示されてから1.5s後にフェードアウトするため、より良い体験が得られます。
実際、xlogだけでなく、cssは汎用的です。プログラムが元のスタイルと競合しない限り、コピーして使用できます！！！