如何使用 HTML 和 CSS 创建窗口加载效果？

在 web 应用程序中，窗口加载效果是一种常见的交互动态效果。当用户打开一个 web 页面时，有时会遇到需要加载大量数据的情况，此时窗口加载效果可以让用户感觉到页面正在加载数据并保持耐心地等待。

本文将介绍如何使用 HTML 和 CSS 创建三种不同样式的窗口加载效果。

1. 纯 CSS 动画

我们可以使用 CSS 动画来创建简单而优雅的窗口加载效果，下面是一段代码示例：

<div class="window-loader">
  <div class="loader"></div>
</div>

<style>
.window-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #333;
  border-top-color: #fff;
  animation: loader-animation 0.8s infinite linear;
}

@keyframes loader-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

这段代码创建了一个白色的带有半透明遮罩的窗口，并在其中添加了一个旋转的加载动画。当加载完成后，可以使用 JavaScript 将其隐藏或删除。

2. 使用 jQuery 插件

jQuery 是一个广泛使用的 JavaScript 库，它为我们带来了许多强大的插件。可以使用 jQuery.EasyLoading 插件来创建一个简单的窗口加载效果。

<div id="content"></div>

<button id="load-btn">加载</button>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.easypiechart/2.1.6/jquery.easypiechart.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.easyloading/1.0.1/jquery.easyloading.min.js"></script>

<script>
$(document).ready(function(){
    $('#load-btn').click(function(){
        $('#content').easyLoading({
            type: 'loader',
            text: '加载中...',
            loader: 'circles',
            textColor: '#666',
            backgroundColor: '#fff',
            opacity: '0.5'
        });
    });
});
</script>

通过点击按钮，可以触发 easyLoading 方法，并将加载动画应用到指定元素上。当加载完成后，动画会自动消失。

3. 使用 JavaScript 和 CSS3

使用 JavaScript 来创建窗口加载效果并结合 CSS3 动画效果可以创建更加丰富和多样化的效果。

<div class="spinner-container">
  <div class="spinner"></div>
</div>

<style>
.spinner-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #eee;
  border-top-color: #999;
  border-radius: 50%;
  animation: spin 0.8s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<script>
function showSpinner() {
  var spinner = document.querySelector('.spinner-container');
  spinner.style.display = 'flex';
}

function hideSpinner() {
  var spinner = document.querySelector('.spinner-container');
  spinner.style.display = 'none';
}

window.addEventListener('load', function() {
  setTimeout(hideSpinner, 2000);
});
</script>

这段代码创建了一个黑色带半透明的遮罩窗口，在其中添加了一个旋转的加载动画，当加载完成后该窗口将会自动隐藏。

以上是关于如何使用 HTML 和 CSS 创建窗口加载效果的三个例子，这些例子可以帮助您创建出吸引人的用户体验。