您现在的位置是：网站首页> 编程资料编程资料

一个全屏的加载动画效果实现CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-05 972人已围观

简介这篇文章主要介绍了一个全屏的加载动画效果实现, 主要依赖于文中所提到的Snap.svg动画库,需要的朋友可以参考下

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

　　这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 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复制内容到剪贴板

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

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

上一篇：使用CSS制作一个比较炫酷的页面切换动画CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

下一篇：CSS中的inherit使用技巧小结CSS 继承 inherit属性的方法深入理解CSS的height:100%和height:inherit之间的使用区别CSS中的两个特殊值用于控制层叠的inherit和initial的方法

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢