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

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

超炫的页面切换动画效果【附源码下载】-来自沈超飞的IT博客 第1张

立即下载? ?? ?在线演示

 

 

 

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

 

 

 

 

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

 

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

 

 

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

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

立即下载? ?? ?在线演示

 

 

//下面这个css和插件后台设置的主题有关系,如果需要换样式,则需要修改以下CSS名称
分享到:

发表评论

昵称

沙发空缺中,还不快抢~