给个人博客加个过场小动画代码

源代码

body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(https://2nt.cn/i/2024/09/15/133010.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
    animation: fadeOut 2s;
    animation-fill-mode: forwards;
    -webkit-transition: fadeOut 2s;
    transition: fadeOut 2s;
    pointer-events: none;
    background-color: #fff;
}
@keyframes fadeOut {
  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
  }
}

画蛇添足版-额外加了个文字放大的效果

body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(https://2nt.cn/i/2024/09/15/133010.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
    animation: fadeOut 3s forwards, scaleUp 3s forwards; 
    pointer-events: none;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes scaleUp {
  0% {
    background-size: 20%;
  }
  100% {
    background-size: 150%; 
  }
}