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

2年前更新

91050

本篇文章也是采用了自定义文章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

教程之家知识/课程/教育
# 美化教程

喜欢就支持一下吧

相关推荐

评论共9条

欢迎您留下宝贵的见解！

提交

只看作者

- lvyelanshan0
  走过南，闯过北，认识大佬不后悔！
  9个月前福建回复
- 卡自动0
  给我上四火！一整个爱住了的动作！
  1年前山东回复
- yz66690
  不要给我压力，那将是我追赶你的动力～
  1年前广东回复
- angelawawa0
  这样啊，没想到。。。
  1年前香港回复
- zl54100
  让我看看！
  1年前安徽回复
- 苏玖0
  不错哦拿走了
  2年前贵州回复

优知新作者0


/*原神启动*/
body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(https://www.uzhix.com/wp-content/uploads/2023/06/202306101503297.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    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;
  }
}
/*原神结束*/

2年前浙江回复