本教程详细介绍了如何使用html和css创建全屏加载动画，并通过javascript在页面内容完全加载后或指定延迟时间后将其优雅地隐藏。文章涵盖了加载动画的结构设计、css样式与关键帧动画的实现，以及利用`window.onload`和`settimeout`精确控制动画生命周期的方法，旨在提升用户体验并确保内容平滑过渡。
在现代网页应用中，加载动画（Loading Animation）是提升用户体验的关键元素之一。当页面内容或数据需要时间加载时，一个设计良好的加载动画能够有效缓解用户的等待焦虑，并清晰地指示后台正在进行操作。本教程将指导您如何从零开始构建一个美观的加载动画，并利用JavaScript精确控制其显示与隐藏，确保内容在准备就绪后平滑呈现。
一、加载动画的必要性与基本构成
加载动画的主要目的是在页面内容尚未完全加载时，提供视觉反馈，避免用户面对空白屏幕或无响应界面。一个典型的加载动画由以下部分构成：
HTML结构： 定义加载动画的容器及其内部元素，通常是一个覆盖整个视口的层。CSS样式： 设置加载层的外观（背景、定位）、动画元素的样式（字体、颜色、大小）以及关键帧动画（如何动起来）。JavaScript逻辑： 控制加载动画何时显示、何时隐藏，通常与页面加载事件或数据请求完成事件结合。
二、HTML结构：构建加载层
首先，我们需要一个HTML结构来承载加载动画。这个结构通常是一个全屏的div，内部包含动画元素，例如文字或图片。
@@##@@ G R A V G I F T
结构说明：
.loading：这是最外层的容器，它将覆盖整个屏幕，作为加载动画的背景。.loading-img：内部容器，用于居中显示加载动画的核心内容。.loading-img-img：包裹一个图片，例如网站的Logo。.loading-text-words：每个字母都作为一个独立的元素，方便我们对它们应用独立的动画效果。
三、CSS样式：定义动画效果
接下来，我们为HTML结构添加CSS样式，实现全屏覆盖、内容居中以及文字模糊动画。
@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);/* 全屏加载层 */.loading { position: fixed; /* 固定定位，覆盖整个视口 */ top: 0; left: 0; width: 100%; height: 100%; background: #fff; /* 白色背景 */ z-index: 9999; /* 确保在所有内容之上 */ display: flex; /* 使用Flexbox居中内容 */ justify-content: center; align-items: center;}/* 加载动画内容的容器 */.loading-img { text-align: center; /* 确保内部行内元素居中 */}/* Logo图片定位 */.loading-img-img { position: relative; top: 15%; /* 相对位置调整 */ display: block; /* 使其独占一行，与文字分离 */ margin-bottom: 10px; /* 与下方文字的间距 */}/* 动画文字样式 */.loading-img span { display: inline-block; /* 使每个字母独立，可应用动画 */ margin: 0 5px; font-family: "Quattrocento Sans", sans-serif; font-size: 30px; color: #333; /* 文字颜色 */}/* 关键帧动画：模糊效果 */@-webkit-keyframes blur-img { 0% { filter: blur(0px); } 100% { filter: blur(4px); }}@keyframes blur-img { 0% { filter: blur(0px); } 100% { filter: blur(4px); }}/* 为每个字母应用延迟的模糊动画 */.loading-img span:nth-child(2) { /* 第一个文字，跳过图片 */ -webkit-animation: blur-img 1.5s 0s infinite linear alternate; animation: blur-img 1.5s 0s infinite linear alternate;}.loading-img span:nth-child(3) { -webkit-animation: blur-img 1.5s 0.2s infinite linear alternate; animation: blur-img 1.5s 0.2s infinite linear alternate;}.loading-img span:nth-child(4) { -webkit-animation: blur-img 1.5s 0.4s infinite linear alternate; animation: blur-img 1.5s 0.4s infinite linear alternate;}.loading-img span:nth-child(5) { -webkit-animation: blur-img 1.5s 0.6s infinite linear alternate; animation: blur-img 1.5s 0.6s infinite linear alternate;}.loading-img span:nth-child(6) { -webkit-animation: blur-img 1.5s 0.8s infinite linear alternate; animation: blur-img 1.5s 0.8s infinite linear alternate;}.loading-img span:nth-child(7) { -webkit-animation: blur-img 1.5s 1s infinite linear alternate; animation: blur-img 1.5s 1s infinite linear alternate;}.loading-img span:nth-child(8) { -webkit-animation: blur-img 1.5s 1.2s infinite linear alternate; animation: blur-img 1.5s 1.2s infinite linear alternate;}.loading-img span:nth-child(9) { -webkit-animation: blur-img 1.5s 1.4s infinite linear alternate; animation: blur-img 1.5s 1.4s infinite linear alternate;}/* 注意：原始代码中nth-child(1)是图片，所以文字从nth-child(2)开始 */
样式说明：
.loading： 使用position: fixed和top: 0; left: 0; width: 100%; height: 100%;使其覆盖整个浏览器视口。z-index: 9999确保它位于所有其他内容之上。这里为了更好地居中，将position: absolute和margin: auto的组合改为display: flex; justify-content: center; align-items: center;。.loading-img： 内部文字的容器，text-align: center使其内部行内元素居中。@keyframes blur-img： 定义了一个名为blur-img的关键帧动画，它使元素的filter属性从blur(0px)变为blur(4px)，实现文字的模糊效果。animation属性：blur-img: 动画名称。1.5s: 动画持续时间。0s, 0.2s, 0.4s…: animation-delay，为每个字母设置不同的延迟，创造出波浪式的动画效果。infinite: 动画无限循环。linear: 动画速度曲线。alternate: 动画在每次循环中反向播放。
四、JavaScript控制：实现动画的显示与隐藏
加载动画的精髓在于其生命周期的管理。我们需要在适当的时机隐藏它，并显示页面的主要内容。
window.onload = function() { // 获取加载动画元素和主要内容元素 const loadingElement = document.querySelector(".loading"); const mainContentElement = document.getElementById("main-content"); // 设置一个延迟，即使页面加载很快，也确保动画展示一段时间 // 这里的6000ms (6秒) 是一个示例，您可以根据动画时长和需求调整 setTimeout(function() { if (loadingElement) { loadingElement.style.display = 'none'; // 隐藏加载动画 } if (mainContentElement) { mainContentElement.style.display = 'block'; // 显示主要内容 } }, 6000); // 6秒后隐藏加载动画};
JavaScript逻辑说明：
window.onload = function() { … };： 这是一个关键的事件监听器。它确保在整个页面，包括所有图片、样式表和脚本等资源都完全加载并解析完毕后，才执行内部的代码。这保证了在隐藏加载动画时，主要内容已经准备好显示。setTimeout(function() { … }, 6000);： setTimeout函数用于在指定的毫秒数（这里是6000毫秒，即6秒）之后执行一次性函数。为什么使用setTimeout？ 即使页面内容加载非常快，加载动画也可能一闪而过，用户甚至来不及看到。通过setTimeout，我们可以强制加载动画至少显示一段预设的时间（例如，与动画本身的循环时间匹配），从而提供更好的用户体验。loadingElement.style.display = ‘none’;： 在延迟结束后，通过将.loading元素的display样式设置为none，使其从文档流中移除，从而隐藏加载动画。mainContentElement.style.display = ‘block’;： 同时，将预先隐藏的主要内容（通过id=”main-content”标识）的display样式设置为block，使其可见。
五、优化与注意事项
隐藏时机：固定延迟： 如示例所示，使用setTimeout。适用于动画有固定循环时间或希望动画至少显示一段时间的场景。资源加载完成： window.onload是最基本的资源加载完成事件。特定数据加载完成： 在单页应用（SPA）中，加载动画可能需要等待特定的API请求完成后再隐藏。此时，您需要将setTimeout或display = ‘none’的逻辑放在API请求成功的回调函数中。平滑过渡效果： 直接将display从block切换到none会显得比较生硬。可以考虑以下替代方案：opacity + transition： 将加载动画的opacity从1渐变为0，然后设置visibility: hidden或display: none。这样可以实现淡出效果。
.loading { /* ...其他样式 */ opacity: 1; transition: opacity 0.5s ease-out; /* 添加过渡效果 */}.loading.hide { /* JS添加这个类来隐藏 */ opacity: 0; pointer-events: none; /* 隐藏后阻止事件 */}
JavaScript: loadingElement.classList.add(‘hide’); 并在transitionend事件后设置display: none;。
CSS动画： 定义一个CSS动画，让加载层在隐藏时执行一个退场动画（例如滑动、缩放等）。用户体验考量：动画时长： 避免过长的加载动画，这可能让用户感到不耐烦。通常几秒钟是比较合适的。反馈清晰： 动画应明确传达“正在加载”的信息。可访问性： 对于屏幕阅读器用户，确保加载状态有ARIA属性（如aria-live=”polite”）或文本提示。性能： 复杂的CSS动画可能会消耗较多的CPU和GPU资源。确保动画效果流畅，避免卡顿。使用transform和opacity进行动画通常比filter或width/height等属性更高效。
六、总结
通过HTML、CSS和JavaScript的协同工作，我们可以创建出既美观又实用的网页加载动画。HTML负责结构，CSS负责视觉呈现和动画效果，而JavaScript则负责精确控制动画的生命周期，确保在最佳时机将其隐藏，从而提升整体用户体验。掌握这些技术，您将能够为您的网页应用带来更专业、更流畅的交互感受。
以上就是网页加载动画的实现与控制：从CSS设计到JavaScript隐藏的完整指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591242.html
微信扫一扫 
支付宝扫一扫 
