在CSS中巧妙地实现骨架屏闪烁动画效果

2023-11-25 13:32:35

使用 CSS 巧妙实现骨架屏闪烁动画效果

在当今快节奏的互联网世界中，优化网站性能至关重要。骨架屏技术是一种巧妙的方法，可以增强用户体验，同时确保页面快速加载。骨架屏利用简单的框架元素来呈现页面的结构和样式，甚至在内容加载完毕之前就能展示页面。这可以通过利用 CSS 中的强大功能来实现，包括 :empty 和 ::after 伪类，以及 CSS3 的 @keyframes 动画。

使用 CSS 构建骨架屏样式

第一步是使用 :empty 伪类选择那些尚未加载内容的元素，并为它们添加骨架屏样式。骨架屏样式通常包括一个简单的边框、一些基本的颜色和阴影。

/* 骨架屏样式 */
.skeleton-element {
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

利用 CSS 闪烁动画

接下来，我们可以使用 ::after 伪类创建一个闪烁效果。闪烁效果通常通过动画实现，该动画可以无限循环或有时间限制。

/* 闪烁效果 CSS */
.skeleton-element::after {
  animation: loading 1s infinite;
}

@keyframes loading {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

骨架屏闪烁动画效果

将这些 CSS 代码应用到你的页面后，你就成功地在 CSS 中实现了骨架屏闪烁动画效果。当页面加载完毕时，骨架屏会逐渐消失，露出真实的内容。

使用 JavaScript 实现骨架屏闪烁动画

除了 CSS 方法之外，你还可以使用 JavaScript 来实现骨架屏闪烁动画。JavaScript 提供了更大的控制权，你可以使用它来创建更复杂的动画效果。

/* 使用 JavaScript 实现骨架屏闪烁动画 */

// 选择所有骨架屏元素
var skeletonElements = document.querySelectorAll(".skeleton-element");

// 创建一个循环，每隔一段时间闪烁骨架屏元素
setInterval(function() {
  // 遍历骨架屏元素
  for (var i = 0; i < skeletonElements.length; i++) {
    // 获取当前骨架屏元素
    var skeletonElement = skeletonElements[i];

    // 判断当前骨架屏元素是否正在闪烁
    if (skeletonElement.classList.contains("is-loading")) {
      // 如果正在闪烁，则停止闪烁
      skeletonElement.classList.remove("is-loading");
    } else {
      // 如果没有闪烁，则开始闪烁
      skeletonElement.classList.add("is-loading");
    }
  }
}, 1000);