遮罩层 缓慢出现 css

你可以使用 CSS3 中的动画属性来实现遮罩层缓慢出现的效果，具体实现步骤如下：

1. 首先在 HTML 中创建一个遮罩层元素，例如：

<div class="overlay"></div>

2. 然后在 CSS 中设置该元素的样式，包括颜色、透明度、位置等属性：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  z-index: 9999;
}

在这里，我们将遮罩层的位置设置为固定的，覆盖整个页面，并将背景颜色设置为黑色，透明度设置为 0，表示一开始是不可见的。

3. 接下来，使用 CSS3 中的动画属性来实现遮罩层缓慢出现的效果，例如：

.overlay {
  /* 其他样式 */
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

在这里，我们通过 animation 属性来指定遮罩层的动画效果，其中 fadeIn 是动画名称，0.5s 是动画持续时间，ease-in-out 是动画速度函数，forwards 表示动画结束后保持最终状态。同时，我们使用 @keyframes 规则来定义动画的关键帧，从透明度为 0 到透明度为 0.5，实现遮罩层缓慢出现的效果。

通过以上步骤，就可以实现遮罩层缓慢出现的效果了。