css+js原生实现动画遮罩

你可以使用CSS和JavaScript原生实现动画遮罩。以下是一种实现方式：

HTML结构：

<div class="container">
  <div class="overlay"></div>
  <div class="content">
    <!-- 这里是你的内容 -->
  </div>
</div>

CSS样式：

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层的颜色和透明度 */
  opacity: 0; /* 初始透明度为0，即完全透明 */
  transition: opacity 0.3s ease; /* 设置过渡效果，使遮罩层的透明度变化平滑 */
}

.content {
  /* 这里是你的内容样式 */
}

JavaScript代码：

const overlay = document.querySelector('.overlay');

function showOverlay() {
  overlay.style.opacity = '1'; // 设置遮罩层透明度为1，即完全不透明
}

function hideOverlay() {
  overlay.style.opacity = '0'; // 设置遮罩层透明度为0，即完全透明
}

// 示例：点击按钮显示/隐藏遮罩层
const button = document.querySelector('button');
button.addEventListener('click', () => {
  if (overlay.style.opacity === '0') {
    showOverlay();
  } else {
    hideOverlay();
  }
});

通过调用`showOverlay()`和`hideOverlay()`函数，你可以在需要的时候显示和隐藏遮罩层。例如，你可以在点击按钮时显示遮罩层，创建一个动画效果。