加载时颤动改变白色背景 (1)

📌 相关文章

📜 加载时颤动改变白色背景 (1)

📅 最后修改于: 2023-12-03 15:07:18.114000 🧑 作者: Mango

加载时颤动改变白色背景

简介

在网页应用的开发中，经常需要为用户提供友好的体验。其中一个重要的体验元素是“加载时颤动并改变白色背景”效果。这个效果能够引起用户的注意，同时也能够让用户感知到正在加载内容。在本文中，我们将介绍如何实现这个效果。

实现

实现这个效果我们需要使用 HTML、CSS 和 JavaScript。下面我们将分别讲解如何使用这些技术实现加载时颤动改变白色背景效果。

HTML

我们需要在 HTML 页面中添加一个 div 元素，并设置其 class 名称为“loading”。这个 div 元素将作为等待加载的背景容器。

<div class="loading"></div>

CSS

在 CSS 中，我们需要设置 loading div 的样式。首先，我们先把它隐藏掉。

.loading {
    display: none;
}

CSS 动画将帮助我们实现加载动画和更新背景颜色。在这个例子中，我们使用 animation 来创建一个动画，同时使用 transition 来改变背景颜色。

.loading {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: spin 1s ease-out infinite;
    transition: background-color 0.2s ease-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

现在，当我们打开网页时，loading div 将显示，但是我们还不能看到加载动画，因为它被隐藏起来了。

JavaScript

在 HTML 中，我们需要加载 JavaScript 文件，并在页面加载完毕后，执行 JavaScript 代码。我们将使用 JavaScript 代码来控制 loading div 的显示与隐藏，并且更新背景颜色。

<!DOCTYPE html>
<html>
<head>
  <title>Loading page</title>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
</head>
<body>
  <div class="loading"></div>
  <h1>Example page</h1>
  <p>...</p>
</body>
</html>

在 JavaScript 中，我们需要先获取 loading div 对象，随后，我们将在 loading div 上添加类名“active”，显示加载动画，并更新背景颜色为灰色。当内容加载完成时，我们将移除类名“active”，隐藏加载动画，并更新背景颜色为白色。

function showLoading() {
  const loading = document.querySelector(".loading");
  loading.classList.add("active");
  setTimeout(() => {
    loading.style.backgroundColor = "#ececec";
  }, 200);
}

function hideLoading() {
  const loading = document.querySelector(".loading");
  loading.style.backgroundColor = "#ffffff";
  loading.classList.remove("active");
}

window.addEventListener("load", () => {
  showLoading();
  setTimeout(hideLoading, 2000);
});

总结

通过这个例子，我们学习了如何使用 HTML、CSS 和 JavaScript 实现加载时颤动并改变背景颜色的效果。通过添加一个 loading 块，我们能够方便地为我们的网页添加一个友好的加载体验。记住，通过合理地使用网页动画，我们可以增强用户体验，让用户充分感受到内容和功能的魅力。