css如何实现页面有雪花飘落并且显示在页面最上层

可以使用CSS动画和伪元素来实现页面有雪花飘落的效果，并且让它们显示在页面最上层。

首先，使用伪元素 ::before 和 ::after 创建雪花图案。然后，使用CSS动画让雪花向下飘落，并且不断地重复这个动画。最后，使用 z-index 属性将雪花置于页面最上层。

以下是一个示例代码：

HTML：

<body>
  <div class="snowflakes"></div>
</body>

CSS：

body {
  height: 100%;
  background-color: #101010;
}

.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

.snowflakes:before,
.snowflakes:after {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
}

.snowflakes:before {
  left: 50%;
}

@keyframes snowflakes-fall {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

.snowflakes:before {
  animation: snowflakes-fall 10s linear infinite;
}

.snowflakes:after {
  animation: snowflakes-fall 10s linear infinite;
  animation-delay: -5s;
}

这段代码会在页面上创建一组白色的雪花，并让它们不断地向下飘落。由于它们被置于页面最上层，所以会覆盖在其他内容之上