html如何点击后全屏逐渐黑掉

您可以使用CSS实现这个效果。首先，在您的HTML文件中添加一个按钮或任何其他事件来触发全屏效果。然后，在CSS文件中，您可以使用伪元素来创建一个黑色的覆盖层，将其设置为全屏并添加一个过渡效果来实现逐渐黑掉的效果。

以下是一个示例代码：

HTML:

<button id="fullscreen-btn">全屏</button>
<div id="fullscreen-overlay"></div>

CSS:

#fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 9999;
  pointer-events: none;
}

#fullscreen-overlay.active {
  opacity: 0.8;
  pointer-events: auto;
}

JavaScript:

const fullscreenBtn = document.getElementById('fullscreen-btn');
const fullscreenOverlay = document.getElementById('fullscreen-overlay');

fullscreenBtn.addEventListener('click', () => {
  fullscreenOverlay.classList.add('active');
});

当您点击按钮时，JavaScript将向覆盖层添加一个“active”类，该类将触发CSS过渡效果并将其设置为不透明。同时，将pointer-events属性从“none”更改为“auto”，以便在覆盖层上执行任何操作。