给网站加一个【原神启动】开屏动画-小妖客栈

给网站加一个【原神启动】开屏动画

作者三尺剑妖

发表于2026-08-07

更新于2026-08-07

该文章433 字
阅读需2 分钟
热度值28
0 条评论

给网站加一个原神的动画，当你打开网站的时候就会出现原神启动，并且十分美观，原神的图标我放下面了，并且以css代码实现启动开屏动画！！

原图

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;
  }
}

版权声明 1 本站名称： 小妖客栈
2 本站网址：www.wangkay.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END