【JS示例】HTML、CSS和JavaScript代码组合在一起创建了一个简单的页面加载动画效果，其中背景图片逐渐从模糊变清晰，同时显示一个从0%到100%的加载文本，最终文本逐渐消失。

本文链接：https://blog.csdn.net/2201_76060199/article/details/142148148

这段HTML、CSS和JavaScript代码组合在一起创建了一个简单的页面加载动画效果，其中背景图片逐渐从模糊到清晰，同时显示一个从0%到100%的加载文本，最终文本逐渐消失。以下是对代码的详细分析：

HTML

基础结构：
- <!DOCTYPE html> 声明文档类型，这里是HTML5。
- <html lang="en"> 开始HTML文档，设置语言为英文。
- <head> 部分包含元数据、样式和标题。
- <body> 部分包含实际的页面内容，包括一个背景部分和一个显示加载百分比的文本。
元素：
- <section class="bg"></section>：这是一个用于显示背景图片的元素。
- <div class="loading-text">0%</div>：这个元素显示加载的百分比，初始值为0%。

CSS

全局设置：
- * { box-sizing: border-box; }：确保所有元素的padding和border都包含在元素的总宽度和高度内。
Body样式：
- 使用Ubuntu字体（如果可用），否则使用sans-serif。
- display: flex; align-items: center; justify-content: center;：使用Flexbox布局，使内容垂直和水平居中。
- height: 100vh; overflow: hidden; margin: 0;：页面高度设为视口高度，隐藏溢出的内容，移除默认的边距。
背景样式 (.bg)：
- background: url('') no-repeat center center/cover;：设置背景图片居中并覆盖整个元素。
- position: absolute; top: -30px; left: -30px; width: calc(100vw + 60px); height: calc(100vh + 60px);：使背景图片稍大于视口，以覆盖整个视口区域，即使页面滚动也不会露出空白。
- z-index: -1;：将背景放在其他内容之下。
- filter: blur(0px);：初始模糊度为0。
加载文本样式 (.loading-text)：
- font-size: 50px; color: #fff;：设置文本大小和颜色为白色。

JavaScript

选择元素：
- const loadText = document.querySelector('.loading-text')：获取加载文本元素。
- const bg = document.querySelector('.bg')：获取背景元素。
初始化变量：
- let load = 0：初始化加载百分比为0。
- let int = setInterval(blurring, 30)：每30毫秒调用一次blurring函数。
blurring函数：
- 增加load变量。
- 如果load超过99，停止定时器。
- 更新加载文本的内容。
- 使用scale函数计算并设置文本的透明度（从1到0）和背景的模糊度（从0到30px）。
scale函数：
- 这是一个线性比例转换函数，将num从in_min到in_max的范围映射到out_min到out_max的范围。

总结

这段代码创建了一个简单的加载动画，其中背景图片逐渐模糊，加载文本从0%更新到100%并逐渐消失。效果主要通过CSS和JavaScript的定时器实现，利用Flexbox进行布局，以及通过线性比例转换函数来动态调整样式属性。为了使背景图片生效，需要将CSS中的background属性的URL值替换为实际的图片路径。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <style>
          * {
              box-sizing: border-box;
          }

          body {
              font-family: 'Ubuntu', sans-serif;
              display: flex;
              align-items: center;
              justify-content: center;
              height: 100vh;
              overflow: hidden;
              margin: 0;
          }

          .bg {
              background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') no-repeat center center/cover;
              position: absolute;
              top: -30px;
              left: -30px;
              width: calc(100vw + 60px);
              height: calc(100vh + 60px);
              z-index: -1;
              filter: blur(0px);
          }

          .loading-text {
              font-size: 50px;
              color: #fff;
          }

      </style>
    <title>Blurry Loading</title>
  </head>
  <body>
    <section class="bg"></section>
    <div class="loading-text">0%</div>

    <script>
        const loadText = document.querySelector('.loading-text')
        const bg = document.querySelector('.bg')

        let load = 0

        let int = setInterval(blurring, 30)

        function blurring() {
            load++

            if (load > 99) {
                clearInterval(int)
            }

            loadText.innerText = `${load}%`
            loadText.style.opacity = scale(load, 0, 100, 1, 0)
            bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
        }

        const scale = (num, in_min, in_max, out_min, out_max) => {
            return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
        }

    </script>
  </body>
</html>