css 遮罩层 动画效果

要实现CSS遮罩层的动画效果，可以使用CSS的transition属性和animation属性。transition属性可以控制元素在不同状态之间的平滑过渡，而animation属性可以创建元素的动画效果。

下面是一个示例代码，展示了如何使用CSS创建一个遮罩层的动画效果：

HTML代码：

<div id="cover">
  <span class="whirly-loader">Loading...</span>
</div>

CSS代码：

#cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  opacity: 0;
  transition: opacity 0.5s;
}

#cover.active {
  display: block;
  opacity: 1;
}

.whirly-loader {
  display: inline-block;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

在上述代码中，通过给遮罩层的display属性设置为none，初始时将其隐藏起来。当需要显示遮罩层时，给它添加一个active类，通过设置opacity属性和transition属性实现渐变显示的效果。

此外，还定义了一个名为spin的动画效果，通过设置transform属性和@keyframes规则来实现旋转的动画效果。通过给whirly-loader元素添加animation属性，使其应用该动画效果。

使用上述代码，你可以在需要的时候通过JavaScript代码添加或移除active类来控制遮罩层的显示和隐藏，并且遮罩层会有一个平滑的过渡效果和旋转的动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [css实现遮罩层动画](https://blog.csdn.net/weixin_42567389/article/details/103082984)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [Q定制云印刷在线DIY定制系统 v5.0 - PHP在线DIY定制系统下载](https://download.csdn.net/download/weixin_36643308/88248678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]