各种页面过度动画效果放在一起，以便可以方便的查看这些有趣的和创造性的过度动画效果，当然有些是非常简单的，比如滑动，也有一些使用perspective和3D transform制作出有深度和动态感的效果。
说明：这只是为了展示一些有趣的动画效果和灵感。它并不是一个滑块或者类似滑块的东西。我们只是添加了一些class使其呈现出动态的过度效果，并不是为了导航。
==========以下内容由 八刀丁二 提供===============
我个人就比较笨 就不会做太复杂的步骤来触发效果切换
但某些特效上还是可以进行修改
主要在animations.css文件
当你下载之后可以看html源代码看下却换导航 中li标签中的data-animation属性
再查看pagetransitions.js中nextPage方法switch中查找data-animation中的数字
找到之后您可以看到 outClass变量 和inClass变量
outClass 值的样式是 退出样式
inClass 添加样式
通过样式名字 在animations.css 文件中 查找 变量中的值 好比 第一个效果是 pt-page-moveToLeft
我就查找 pt-page-moveToLeft 样式
在 pt-page-moveToLeft样式中 有动画场景
1 2 3 4 5 | .pt-page-moveToLeft { -webkit-animation: moveToLeft .6s ease both; -moz-animation: moveToLeft .6s ease both; animation: moveToLeft .6s ease both;} |
场景样式变量是 moveToLeft 我们再查找 moveToLeft
1 2 3 4 5 6 7 8 9 | @-webkit-keyframes moveToLeft { to { -webkit-transform: translateX(-100%); }}@-moz-keyframes moveToLeft { to { -moz-transform: translateX(-100%); }}@keyframes moveToLeft { to { transform: translateX(-100%); }} |
每个样式有应对相对动画场景样式 可以直接复制在您想要的样式上也即可 要是通过js切换 还请高手写个吧
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 圆形时间进度条-倒计时
- 下一个特效： 多图片上传预览（纯前端）