# 切图秀 **Repository Path**: qietuwang/qietuxiu ## Basic Information - **Project Name**: 切图秀 - **Description**: 我们把切图秀定义为基于html5+css3前端切图实现的微场景秀。并且开源切图秀的基础项目,它提供了一个可靠的基础去创建你的项目,你只需要发挥你的创意去组合动画。 - **Primary Language**: HTML - **License**: Not specified - **Default Branch**: master - **Homepage**: http://www.qietu.com/qietuxiu/ - **GVP Project**: No ## Statistics - **Stars**: 21 - **Forks**: 6 - **Created**: 2017-06-23 - **Last Updated**: 2021-07-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 什么是切图秀? 我们把切图秀定义为基于h5前端切图实现的适合手机微信端浏览的比较炫酷的页面。并且开源切图秀的基础项目,它提供了一个可靠的基础去创建你的h5场景,你只需要发挥你的创意去组合动画。 作品 切图秀被用在了很多项目中,例如跟我们合作的汉口银行,肌肤管家,以及安以轩结婚请帖。 链接地址:http://ent.qq.com/a/20170507/017272.htm 实现原理 切图秀基于jquery.fullpage,并且加以改造,融合了非常强大的css3动画库animate.css,通过非常简单的方式可以实现不同动画的调用。 使用方式 在head区域加入 ``` ``` 在前面加入 ``` ``` 结构规则 ```
xxx
xxx
xxx
``` 添加动画 data-fp-animate="zysBounceIn" (必须要加,动画来源于animate.css动画库) 参考文档 http://developer.qietu.com/p/CSS3-Animation/tools.html data-fp-delay="1s" (延迟1秒出现,非必要,不添加为不延迟) data-fp-duration="1s" (动画时间1s,非必要,不添加默认为1s) data-fp-iteration="10" (动画反复执行10次,非必要,不添加默认为1次,值为“infinite”代表无限循环。) ``` ``` 关于loading 集成了波浪的进度条显示,它可以真实的反应当前的加载进度,增强用户体验。 ```
资源加载0%
``` 关于背景音乐 集成了背景音乐播放功能,可以点击停止,再点击开启。 ```
``` qietu(.com)切图秀