利用CSS给自己的网站增加一个原神启动开屏动画效果-砝码网

利用CSS给自己的网站增加一个原神启动开屏动画效果

前言说明

这是一个用CSS代码实现原神开屏动画的教程。如果你喜欢这个效果,可以按照以下步骤进行测试和优化:

教程说明

1、首先,保存原神的图片,并确保图片清晰可见。

下载图片:https://shendu.lanzouq.com/i6AAN1fa92ve

2、然后将图片链接替换到CSS代码的background-image属性中。

/*原神启动*/
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;
  }
}

在以上CSS代码中,通过:after伪元素将图片添加到页面上。请将代码中的图片链接替换为你保存的原神图片的链接。

接下来,你可以根据需要对动画效果进行优化。例如,你可以调整动画持续时间(animation属性中的时间值),或者修改透明度的变化方式(@keyframes中的百分比值)。

最后,将这段CSS代码添加到你的个人博客或动漫二次元网站的样式表中,即可实现原神开屏动画效果。

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享