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

温馨提示:本文最后更新于2023-12-16 20:27:17,某些文章具有时效性,若有错误或已失效,请在下方留言。

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

原神图

图片[1] - 给网站加一个原神启动开屏动画

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
喜欢就支持一下吧
点赞8 分享
评论 共1条

请登录后发表评论