给你的网站添加一个原神启动开屏loading动画css(已适配日夜间切换模式)

给你的网站添加一个原神启动开屏loading动画css(已适配日夜间切换模式)-知新网
给你的网站添加一个原神启动开屏loading动画css(已适配日夜间切换模式)
此内容为免费资源,请登录后查看
0
免费资源

本篇文章也是采用了自定义文章css,大家打开文章时就能够看到那个开屏动画

1699618185-QQ截图20231110200928

?教程开始

先保存上方原神图,也可以自行发挥,但是图片需要清晰可见然后去自定义css里填入:

/*原神启动*/
body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(图片链接);
    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;
  }
}

该教程原作者为泽泽社长

切换日夜模式

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共9条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复
    • 的头像-知新网lvyelanshan0
    • 的头像-知新网卡自动0
    • 的头像-知新网yz66690
    • 的头像-知新网angelawawa0
    • 的头像-知新网zl54100
    • 头像苏玖0
    • 的头像-知新网钻石会员优知新作者0
    • 的头像-知新网Ty_时初0
    • 的头像-知新网静鱼客栈0
社区求救信号帮助是一种美德