使用js实现带透明遮罩的加载动画

好的，我可以帮你解答这个问题。

首先，我们需要一个带透明遮罩的加载动画的 HTML 结构，如下所示：

<div class="loading-container">
  <div class="loading-mask"></div>
  <div class="loading-spinner"></div>
</div>

其中，`.loading-container` 是加载动画的最外层容器，`.loading-mask` 是透明遮罩，`.loading-spinner` 是加载动画图标。

接下来，我们可以使用 CSS 来定义样式：

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-top-color: #00bcd4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

这里，我们使用了绝对定位和 `z-index` 来使加载动画覆盖在页面上。透明遮罩使用了半透明的黑色背景色，加载动画图标使用了 CSS3 动画来实现旋转效果。

最后，我们可以使用 JavaScript 来动态添加和删除加载动画：

// 显示加载动画
function showLoading() {
  const loadingContainer = document.createElement('div');
  loadingContainer.className = 'loading-container';
  loadingContainer.innerHTML = `
    <div class="loading-mask"></div>
    <div class="loading-spinner"></div>
  `;
  document.body.appendChild(loadingContainer);
}

// 隐藏加载动画
function hideLoading() {
  const loadingContainer = document.querySelector('.loading-container');
  if (loadingContainer) {
    document.body.removeChild(loadingContainer);
  }
}

以上就是使用 JavaScript 实现带透明遮罩的加载动画的方法。希望能对你有所帮助。