CSS MASK：实现惊艳 loading 动画，剖析 DOM 与 BOM 中的迥异位置与大小属性

2023-10-20 14:45:57







## 前言

在前端开发领域，动画作为不可或缺的元素，一直备受关注。CSS MASK 作为一种强大的工具，可以轻松创建出各种令人惊叹的动画效果。今天，我们将一起探索如何使用 CSS MASK 实现惊艳的 loading 动画，同时深入了解 DOM 和 BOM 中不同位置和大小属性的奥秘。让我们一起踏上这段激动人心的旅程吧！

## CSS MASK 的魔力

CSS MASK 是一种利用遮罩图像或元素来控制元素可见部分的技术，它可以为网页增添丰富的视觉效果。在 loading 动画中，CSS MASK 可以用来巧妙地隐藏加载中的内容，并通过动画效果来吸引用户的注意力。

让我们来看一个简单的例子：

```css
.loading-container {
  width: 200px;
  height: 200px;
  background: #fff;
  position: relative;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(loading.svg) no-repeat center center;
  animation: loading 2s infinite linear;
}

@keyframes loading {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

在这个例子中，我们使用了一张 SVG 图片作为遮罩图像，并通过 CSS 动画让它在容器中左右移动。这样，当页面加载时，就会出现一个生动有趣的 loading 动画，让用户在等待的过程中不会感到枯燥。

DOM 与 BOM 的位置与大小属性

在前端开发中，DOM（文档对象模型）和 BOM（浏览器对象模型）是两个非常重要的概念。它们分别代表了网页文档和浏览器窗口的结构和属性。

在 DOM 中，每个元素都有自己的位置和大小属性。这些属性可以用来控制元素在页面中的位置和尺寸。

元素.style.left = "100px"; // 设置元素的 left 属性
元素.style.top = "100px"; // 设置元素的 top 属性
元素.style.width = "200px"; // 设置元素的 width 属性
元素.style.height = "200px"; // 设置元素的 height 属性

在 BOM 中，浏览器窗口也有自己的位置和大小属性。这些属性可以用来控制浏览器窗口的位置和尺寸。

window.screenX; // 获取浏览器窗口的 left 属性
window.screenY; // 获取浏览器窗口的 top 属性
window.outerWidth; // 获取浏览器窗口的 width 属性
window.outerHeight; // 获取浏览器窗口的 height 属性

理解差异，灵活应用

DOM 和 BOM 中的位置和大小属性虽然相似，但也有着本质的区别。DOM 中的属性是针对网页文档中的元素，而 BOM 中的属性是针对浏览器窗口。

在实际开发中，我们需要根据具体情况来灵活应用这些属性。例如，如果我们要创建一个浮动在页面右上角的元素，那么可以使用 DOM 中的属性来控制元素的位置。

元素.style.right = "0"; // 将元素的 right 属性设置为 0
元素.style.top = "0"; // 将元素的 top 属性设置为 0

如果我们要创建一个全屏的模态框，那么可以使用 BOM 中的属性来控制模态框的位置和尺寸。

window.screenX = 0; // 将浏览器窗口的 left 属性设置为 0
window.screenY = 0; // 将浏览器窗口的 top 属性设置为 0
window.outerWidth = window.screen.availWidth; // 将浏览器窗口的 width 属性设置为屏幕的可用宽度
window.outerHeight = window.screen.availHeight; // 将浏览器窗口的 height 属性设置为屏幕的可用高度