给网站增加一个启动效果

 

body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999999;
    background-image: url(ys.svg);
    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 代码的目标body:after伪事实的例子

1.content: " ";

• 创建一个空的内容，用于生成伪元素。这是伪元素的必要属性。

2.**position: fixed;

• 设置元素伪的定位方式为fixed，意味着它的位置是相对于视口的，而不是

3.**inset: 0;

• inset是 `top, right, `底部bottom，left四个属性的简写（简0表示伪

4.background-color: white;

• 创建

5.z-index: 999999;

• z-index从一开始就

6. *background-image: url(ys.svg);

• 地址图片为ys.svg，

7.background-repeat: no-repeat;

• 设置背景图片不重复。如果图片的尺寸小于元

8. *background-position: center;

• 图像背景会居中显示在伪元素的背景中

9.background-size: 30%;

• 设置背景图片的尺寸以求原始尺寸

10.animation: fadeOut 3s;

• 设置动画fadeOut，并指定其持续时间为3秒。动画会

11.animation-fill-mode: forwards;

• 设置动画结束后，伪元素的样式将保持动画结束时的状态。这样，动画执行完成后，伪元素就会保持opacity: 0。

12. **-webkit-transition: fadeOut 3s;和transition: fadeOut 3s;

• 这行设置了过渡效果，目的是让伪元素转变地消失。然而，transition不是专门用于动画的，它是用于平的animation，其实`transition并不会

13.pointer-events: none;

• 设置内容pointer-events为none，表示伪元素

14.@keyframes fadeOut

• 定义了所谓fadeOut的关键帧动画，目的是制作元素
  • 在 50% 的时候，元素的透明度（opacity）为
  • 在 100% 时，

总结：

大概代码创建了一个全屏、白色背景、中央有一个SVG图片的伪元素。这个伪元素会在3秒内逐渐淡出（从不透明到透明）。由于pointer-events: none;，它不会阻止页面上其他内容的交互。动画的