真是好东西！一组动感的页面加载动画效果

　　如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站，你可能已经注意到在显示新内容之前动感的页面加载动画了。这种风格的动画效果最近非常流行，因此这篇文章想给你带来一些启示。

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

立即下载在线演示

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

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

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

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none"><path d="M 0,70 80,60 80,80 0,80 0,70"/></svg>
</div><!-- /pageload-overlay -->

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

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

.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）的：

width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

　　使用 slice 将保持纵横比，但这样整个页面显示区域都可以被 viewBox 覆盖。我们的示例创建13种效果，但正如你所看到的，可能性是无止境的。我们真的很希望你能获得启发。

立即下载在线演示

您可能感兴趣的相关文章

你见过吗？9款超炫的复选框（Checkbox）效果
Codrops 教程：基于 CSS3 的全屏网页过渡特效
Codrops 教程：基于 CSS3 的精美模态窗口效果
Debuggex – 超好用的正则表达式可视化调试工具
Zepto.js – 为现代浏览器而生的轻量JavaScript库

本文链接：真是好东西！13个页面加载动画效果 via Codrops

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

真是好东西！一组动感的页面加载动画效果相关推荐

python能做页面加载动画吗_HTML+CSS实现页面加载（loading）动画效果
大家在浏览页面时有没有遇到页面正在loading(加载)的情况,那作为一个前端开发人员,你知道如何用CSS3和HTML制作页面加载动画效果吗?这篇文章就和大家分享一个超级简单实用的CSS3 圆圈加载( ...
SAP UI的加载动画效果和幽灵设计(Ghost Design)
这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章. 在本篇文章之前,Jerry 印象最深的幽灵,应该要算<星际争霸I>里人族能够隐形的空中单位 Wr ...
Web 页面加载动画
Web 页面加载动画在 Web 开发中,通常会需要在页面中添加加载动画,以减少用户等待页面加载的焦虑感.下面介绍一个常用的页面加载动画的实现方法,同时介绍其 CSS 和 JavaScript 代码. ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
js 写html加载中的效果,基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下效果图: 正在载入正在载入首页,请稍候. var line = "||" var ...
加载动画php,CSS3学习之页面加载动画（二）
本篇文章给大家分享6种css3的页面加载动画.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[CSS3学习之页面加载动画(一)]中已经分享了四个CSS3的加载动画,今天 ...
HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
【每日一练】118—一款评论留言加载动画效果
写在前面今天这个练习也是我们在开发中会经常遇到的一个实用场景,比方我们在开发个人主页或者企业营销主页时,对某人或者某物的推荐留言评论,都会应用到,这种效果也是我们在很多页面中经常见到的一种效果,好了 ...
模仿滴滴单车解锁的时候，从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...

真是好东西！一组动感的页面加载动画效果

真是好东西！一组动感的页面加载动画效果相关推荐

最新文章

热门文章