zibll子比主题美化:开屏动画为原神启动

当网站打开时,《原神》启动画面跃然屏上,瞬间点燃心中的提瓦特大陆冒险之魂。今日,就来为大家分享如何设置这令人心动的原神开屏动画,让每一次点亮屏幕都成为独特的游戏仪式。

效果演示

图片[1]-zibll子比主题美化:开屏动画为原神启动-晓白博客网

代码&文件

文件

下载图标
yuanshen.svg
svg文件
11.3K

代码

body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(yuanshen.svg文件路径);
    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;
  }
}

使用教程

首先上传yuanshen.svg文件到一个可以访问地方,将上述代码放置在Zibll主题设置>全局&功能>自定义代码>自定义CSS样式中并进行修改。

晓白博客网版权所有,原文地址https://www.xbnb.cn/154
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 如有资源失效请在下面及时反馈,谢谢!!

请登录后发表评论

    登录后才能查看这里的内容哦