如何使用 CSS 创建骨架屏幕加载效果？

骨架屏幕用于指示内容正在加载。它们也称为启动画面。这是现代设计趋势的一部分。在某些情况下，骨架屏幕比加载旋转器更好。 Facebook、谷歌等许多大公司都在使用它。

HTML 代码：在本节中，我们将创建加载页面屏幕骨架的基本结构。要创建加载页面骨架，我们需要使用

元素来显示内容。我们将为loading类，我们将在加载内容时将其删除。

CSS 代码：在本节中，我们将使用一些 CSS 属性来创建加载页面屏幕骨架。

注意： loading类有一个从左向右移动以模仿动画的伪元素。

JavaScript 代码：现在，当加载内容时，我们可以loading类并将内容添加到适当的位置。

    const title = document.querySelector(".card__title");
    const description = document.querySelector(".card__description");
    const image = document.querySelector(".card__image");
      
    // Remove the 'loading' class
    title.classList.remove("loading");
    description.classList.remove("loading");
    image.classList.remove("loading");
      
    // Add the content
    title.textContent = 'Title';
    description.textContent = 'This is the description.';
    image.innerHTML = `<img src="${image-source}`;

完整代码：在本节中，我们将结合以上两节(HTML 和 CSS 代码)来创建骨架屏幕加载效果。如果添加了 JavaScript 代码，则骨架将被数据替换。

例子：

输出：