这是一款效果非常炫酷的不同风格页面布局幻灯片特效。该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果。在线预览 源码下载该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CSS3属性,需要最新版本的现代浏览器才能看到 ...
这是一款效果非常炫酷的不同风格页面布局幻灯片特效。该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果。
在线预览 源码下载
该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CSS3属性,需要最新版本的现代浏览器才能看到效果。对于IE浏览器,前面几种效果可以在IE11及以上的浏览器看到效果,最后一种效果由于IE浏览器不支持SVG clip-path属性,所以是看不到效果的。
使用方法
HTML结构
该幻灯片的基本HTML结构如下:每一个幻灯片都有各自的布局class类,和一个data-layout
属性,用于制作各自的动画效果。
CSS样式
下面是其中一个布局的CSS样式:
得到的效果如下图所示:
每一个幻灯片布局的动画效果定义在js文件中。结构为: [layout name] : { out : {navigating out properties}, in : {navigating in properties} }
。可以为进入和离开的幻灯片设置不同的动画效果。下面的代码是第一个布局的示例代码:
在线预览 源码下载
原标题:超酷不同风格页面布局幻灯片特效
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。