太赞了！超炫的页面切换动画效果【附源码下载】

原文:太赞了！超炫的页面切换动画效果【附源码下载】

　　今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。虽然有些效果都非常简单，只是简单的滑动动作，但另外的一些则是利用了视角（Perspective）和 3D 转换（3D Transforms）来创造一些立体动感的效果。

立即下载在线演示

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

　　CSS 动画根据它们的实现的效果分为不同的组。为展示页面过渡效果，我们使用以下结构：

<div id="pt-main" class="pt-perspective"><div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div><div class="pt-page pt-page-2"><!-- ... --></div><!-- ... -->
</div>

　　透视容器的位置是相对的，我们增加1200像素透视它。所有动画效果都需要以下的样式：

.pt-perspective {position: relative;width: 100%;height: 100%;perspective: 1200px;transform-style: preserve-3d;
}.pt-page {width: 100%;height: 100%;position: absolute;top: 0;left: 0;visibility: hidden;overflow: hidden;backface-visibility: hidden;transform: translate3d(0, 0, 0);
}.pt-page-current,
.no-js .pt-page {visibility: visible;
}.no-js body {overflow: auto;
}.pt-page-ontop {z-index: 999;
}

　　上面的 .pt-page-ontop 样式用于某些页面过渡效果，即我们需要让一个页面留在另一个页面的顶部。下面是一个代码例子，展示了动画类和关键帧动画，在不同方向上缩放网页和以及淡入淡出效果：

/* scale and fade */.pt-page-scaleDown {animation: scaleDown .7s ease both;
}.pt-page-scaleUp {animation: scaleUp .7s ease both;
}.pt-page-scaleUpDown {animation: scaleUpDown .5s ease both;
}.pt-page-scaleDownUp {animation: scaleDownUp .5s ease both;
}.pt-page-scaleDownCenter {animation: scaleDownCenter .4s ease-in both;
}.pt-page-scaleUpCenter {animation: scaleUpCenter .4s ease-out both;
}/************ keyframes ************//* scale and fade */@keyframes scaleDown {to { opacity: 0; transform: scale(.8); }
}@keyframes scaleUp {from { opacity: 0; transform: scale(.8); }
}@keyframes scaleUpDown {from { opacity: 0; transform: scale(1.2); }
}@keyframes scaleDownUp {to { opacity: 0; transform: scale(1.2); }
}@keyframes scaleDownCenter {to { opacity: 0; transform: scale(.7); }
}@keyframes scaleUpCenter {from { opacity: 0; transform: scale(.7); }
}

　　对于本演示的目的，我们采用了相应的动画类应用到当前页以及即将切换进来的页面，例如：

//...case 17:outClass = 'pt-page-scaleDown';inClass = 'pt-page-moveFromRight pt-page-ontop';break;
case 18:outClass = 'pt-page-scaleDown';inClass = 'pt-page-moveFromLeft pt-page-ontop';break;
case 19:outClass = 'pt-page-scaleDown';inClass = 'pt-page-moveFromBottom pt-page-ontop';break;// ...

　　查看演示，您可以通过点击第一个按钮来浏览一整套的页面切换效果，您也可以选择从下拉菜单中选择一个特定的效果进行预览。

　　我希望你会喜欢这个并从中得到启发，创作出一些更加令人兴奋的东西！

立即下载在线演示

您可能感兴趣的相关文章

创意无限！一组网页边栏过渡动画【附源码下载】
真是好东西！13种非常动感的页面加载动画效果
你见过吗？9款超炫的复选框（Checkbox）效果
超赞！基于 Bootstrap 的响应式的后台管理模板
Magic CSS3 – 帮助你实现神奇的交互动画效果

本文链接：太赞了！超炫的页面切换动画效果 via Codrops

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

本文出处【http://www.cnblogs.com/lhb25/】

posted on 2014-05-08 22:15 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/3717785.html

太赞了！超炫的页面切换动画效果【附源码下载】相关推荐

赞！超炫的页面切换动画效果【附源码下载】
在下面的示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D ...
开博第一篇作品-C#winform版《仿360杀毒》页面切换动画效果(内含源码)
C#winform版 <仿360杀毒>页面切换动画效果昨天跟一个同事聊天,谈到了360杀毒的页面效果不错,我们所做的winform页面都是拖控件还是拖控件,不能吸引客户的注意力,想改成3 ...
html5炫酷作品源代码,8个超炫酷的HTML5动画演示及源码
利用HTML5可以绘制很多静态的图像,也可以制作一些炫酷的动画,本文分享了8个利用HTML5和CSS3实现的动画演示,同时也分享了源代码供大家下载参考. 1.HTML5 3D点阵列波浪翻滚动画这个H ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
ScrollMagic – 酷毙了！超炫的页面滚动交互效果
ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...
超酷震撼 HTML5/CSS3动画应用及源码
HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...
微信小程序：开心锤锤超火动态表情包微信小程序源码下载自动采集
这是一款表情包小程序源码大家刷抖音的时候应该都刷过开心锤锤这个网红卡通短视频吧现在这一款小程序就是和它有关的里面的表情包呢大部分都是动态表情包(斗图的时候是不是更炫) 至于里面的表情包人物的就都 ...
html实现酷炫好看的个人介绍主页(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的简介界面 1.3 教育经历界面 1.4 我的源码界面 1.5 我的相册界面 1.6 朋友评价界面 1.7 热门文章界面 1.8 联系我界面 2.效果 ...
java实现幻灯片页面切换动画,java实现多种幻灯片切换特效(经典,附源码)
功能说明: 代码实现了多种幻灯片变换特效. 如:淡入淡出.缓慢覆盖.旋转覆盖等10多种变换效果. 在线运行:点此进入在线运行功能实现: 1.图片加载类ImageLoader实现: 1)用阻塞队列存储 ...
Android开发之仿微信底部导航切换(Compose版本)附加源码下载
老套路,先上(献上)效果图实际上这个页面在Android开发中太常见了.所以学些了下Compose版本说下核心: 1.需要记录每次切换的页面position var currentNavigati ...

太赞了！超炫的页面切换动画效果【附源码下载】

太赞了！超炫的页面切换动画效果【附源码下载】相关推荐

最新文章

热门文章