美到让人窒息的毛玻璃 Loader 效果只需 06 分钟，还在等什么？

2023-09-23 14:50:19

毛玻璃效果是近年来非常流行的一种设计元素，它可以给用户带来一种朦胧而优雅的感觉。Loader 效果则是指页面加载时出现的动画效果，它可以帮助用户在等待页面加载时保持耐心。

将毛玻璃效果和 Loader 效果结合起来，就可以制作出非常美观实用的页面加载动画。下面，我们就一步一步来实现这个效果。

步骤一：创建 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
    /* CSS 代码 */
  </style>
</head>
<body>
  <div class="loader">
    <div class="loader-content">
      <h1>正在加载...</h1>
    </div>
  </div>
</body>
</html>

步骤二：编写 CSS 样式

/* CSS 代码 */

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.loader-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

h1 {
  font-size: 2rem;
  color: #fff;
}

步骤三：添加 JavaScript 代码

/* JavaScript 代码 */

window.onload = function() {
  var loader = document.querySelector('.loader');
  loader.classList.add('fade-out');

  setTimeout(function() {
    loader.remove();
  }, 1000);
};