随着时间的推移，在一个多页面的网站上点击的行为可能会变得单调乏味。添加页面过渡效果可以帮助将事情提升一个档次。当新的内容加载时，它们可以很好地保持用户的兴趣，同时对性能的影响最小。
考虑到这一点，这里有10个页面转换的例子，可以为你的下一个项目添加一点特别的东西。
网页设计师工具箱
无限下载。1,000,000+网页模板、主题、插件、设计资产，以及更多的东西!
[
网页模板
2,000多个模板
](1.envato.market/c/78798/298…)
[
通讯模板
270多个模板
](1.envato.market/c/78798/298…)
[
仪表板模板
150+模板
](1.envato.market/c/78798/298…)
[
WordPress主题
1,200多个主题
](1.envato.market/c/78798/298…)
[
WordPress 插件
550+ 插件
](1.envato.market/c/78798/298…)
[
模板
8,200多个模板
](1.envato.market/c/78798/298…)
Vue.js的多样性
在Vue.js框架的帮助下，这里的例子有一套快速而灵活的过渡。这里有很好的基本过渡（fade,zoom ）和一些与我们通常看到的相比有点独特的过渡（flipX,flipY andslideUp ）。
请看Tim Rijkse的PenVue2页面转场与GSAP。
老式电视
不管是否有意，这个过渡让人联想到老式CRT电视的关闭。彩色背景缩小到一行，很像我的老电视在看了一晚MTV后的表现（当时他们还在播放音乐）。然后，过渡以反转效果结束（就像我的电视在第二天早上醒来时一样）。
请看Mergim Ujkani的《笔页过渡》。
变形的SVG
在这个过渡中使用了一个圆形的SVG来增加一个类似时钟的效果。这个动作增加了一种电影般的质量，似乎很适合多媒体网站。
查看Arsen Zbidniakov的PenPage Transition Loader
用预加载器快速过渡
如果你打算在整个网站的多个地方使用页面过渡，那么它们最好是快速的。这就是这个例子的厉害之处。有一个彩色的动画预加载器，迅速为内容的显示让路。在不浪费宝贵时间的情况下，它看起来很有趣。
缩略图到全页
这是一个相当独特的效果，因为点击一个缩略图过渡到一个模版，使用相同的图像作为全屏背景。这个效果是CSS过渡和Angular.js的结合。
请看Steve Gardner的Pen缩略图到全屏页面的转换。
擦拭干净
几十年来，一个好的老式擦拭效果一直是电视和电影转场的主要内容。在这里，我们看到一个用CSS和一点点jQuery激活的变体。
查看TOMAZKI的PenPage过渡CSS3
使用GSAP的立方贝塞尔曲线
GSAP是一个可以实现超快动画的库。这个例子利用它创造了一个 "向上滑动 "的过渡效果，以及一些动画背景的乐趣。
请看Maciej Siwanowicz的PenGSAP立体贝塞尔页面过渡。
飞溅-喷溅
这个响应式模态过渡有一个很酷的 "飞溅 "效果，肯定会引起用户的注意。它快速、多彩、有趣。它是用Lottie制作的，它把Adobe After Effects的过渡效果带到了网上。
查看Jonas Sandstedt制作的Pen响应式bodymovin模式/页面转换
有一个突发事件
歇斯底里的突变效果有一些是永恒的。无数的科幻节目和电影没有它就不一样了。这个来自nclud的例子显示了他们是如何用各种突变的好东西构建一个页面过渡的。
请看nclud团队制作的 "钢笔画布突变 "介绍。
三维立方体
想象一下，你网站上的每个页面都是一个立方体（或五边形，或六边形等）上的面板。进入下一个页面，只是把这个形状翻转过来，显示正确的面板。这就是这个利用jQuery和Velocity.js的旋转立方体效果背后的意义所在。
请看Hubert Warzycha的Pen3D Cube页面转换。
近年来，页面转换有了长足的进步。它们已经从简单的渐变和颜色变化一直发展到在电影中看起来并不陌生的效果。
CSS与正确的JavaScript库相结合，可以产生引人注目的视觉效果。如果使用得当，转场效果可以成为提高用户体验的有趣方式。
The post10 CSS & JavaScript Snippets for Creating Page Transition Effectsappeared first onSpeckyboy Design Magazine.
