导航：首页 > 开发技术 >

如何实现一个全屏的加载动画效果

发表于：2025-01-20 作者：千家信息网编辑

千家信息网最后更新 2025年01月20日，本篇内容主要讲解"如何实现一个全屏的加载动画效果"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"如何实现一个全屏的加载动画效果"吧!这个效果的核心是让一个形

千家信息网最后更新 2025年01月20日如何实现一个全屏的加载动画效果

本篇内容主要讲解"如何实现一个全屏的加载动画效果"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"如何实现一个全屏的加载动画效果"吧!

　　这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。

在线演示

需要注意的是，这里的示例只是提供一种思路，动态内容加载是模拟的。另外没有做降级处理，动画和伪元素可能在某些浏览器无法正常工作。

　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

　　我们显示遮罩的方式是，定义一个 SVG 路径动画：

　　我们定义的初始路径在页面中是看不到的，开始和结果路径分别定义在 data-opening 和 data-closing 属性中。正如你所看到的，我们使用的是小型的 viewBox，但我们舒展绘图窗口的宽度和高度为100%，而不是保持长宽比。如果我们没有定义一个闭合的路径，我们将动画回到初始路径。

　　请注意，我们也可以添加多个路径（用分号隔开），它允许 SVG 绘制你将在第一演示中看到的步骤明智的动画。我们设置叠加划分到一个固定的位置，覆盖了整个页面，并通过给 ::before 和 ::after 伪元素添加样式来实现加载提示效果。

JavaScript Code复制内容到剪贴板

.pageload-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
}
.pageload-overlay.show {
visibility: visible;
}
.pageload-overlay svg {
position: absolute;
top: 0;
left: 0;
}
.pageload-overlay svg path {
fill: #fff;
}

　　我们在这里使用 visibility，因为使用这些固定的风格定位与指针以及 SVG 的事件可能在移动端有些问题，所以我们通过定位和操纵父 DIV 来代替。你可能已经注意到，圆形动画也从一个路径到另一个路径变换来实现（当然有其他的实现方式，例如缩放），但我们使用以下值来确定圆是响应式（ Rseponsive）的：

XML/HTML Code复制内容到剪贴板