首先在网上找到原神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
嘛都是通用的,不管啥程序只要不和原始样式冲突,复制过去都能用!!!
评论区