css+js原生实现动画遮罩

要实现动画遮罩效果，可以使用CSS和JavaScript原生实现。下面是一种实现方式：

HTML结构：

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
  <div class="overlay"></div>
</div>

CSS样式：

.container {
  position: relative;
}

.content {
  /* 内容样式 */
}

.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-in-out; /* 过渡效果 */
  pointer-events: none; /* 遮罩层不响应鼠标事件 */
}

JavaScript代码：

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

container.addEventListener('mouseenter', () => {
  overlay.style.opacity = '1'; // 鼠标进入时显示遮罩层
});

container.addEventListener('mouseleave', () => {
  overlay.style.opacity = '0'; // 鼠标离开时隐藏遮罩层
});

这段代码实现了鼠标悬停在容器上时显示遮罩层的效果。你可以根据需要修改样式和事件触发时机来实现其他的动画遮罩效果。