# H5-animate-
中秋主题--Html5宣传动画网页(swiper)
1)此demo利用了swiper框架,animat动画库,还有设置js代码来做到自适应移动端,转换单位是rem,与px转换是/100
2)此素材在千图网使用会员下载原创psd,谢谢提供的h5设计稿的作者,利用此设计稿我做成这demo,仅供参考与学习,有做的不好纠正与体谅;
3)demo里面使用的动画animate,有些是利用了第三方动画库,不过大部分是自己自定义写的动画效果;不过一般设置动画都很大程度是根据设计稿的
主题来构思设置啥样的动画效果比较好。
效果图
![Alt text](https://github.com/lilyping/H5-animate-/blob/master/%E4%B8%AD%E7%A7%8Bh5%E5%AE%A3%E4%BC%A0%E9%A1%B5/images/showPic.png)
部分说明:第一页,使用了传送带的循环动画效果;还使用了树叶被风吹后摇晃的动画效果
![Alt text](https://github.com/lilyping/H5-animate-/blob/master/%E4%B8%AD%E7%A7%8Bh5%E5%AE%A3%E4%BC%A0%E9%A1%B5/images/showPic2.png)
部分说明:第二页,利用了cut裁剪动画效果(有点类似文本打字出现的效果);不过cut的动画效果的瑕疵就是设置这种cut效果,安卓显示正常的效果,
苹果不兼容,效果是直接出现,而不是像打印一样处理;
![Alt text](https://github.com/lilyping/H5-animate-/blob/master/%E4%B8%AD%E7%A7%8Bh5%E5%AE%A3%E4%BC%A0%E9%A1%B5/images/showPic3.png)
部分说明:第三页,使用了字体垂掉,然后掉到一定位置的效果
![Alt text](https://github.com/lilyping/H5-animate-/blob/master/%E4%B8%AD%E7%A7%8Bh5%E5%AE%A3%E4%BC%A0%E9%A1%B5/images/showPic4.png)
部分说明:第四页,使用了h5移动端拖拽效果(仿手机开锁那种效果)
![Alt text](https://github.com/lilyping/H5-animate-/blob/master/%E4%B8%AD%E7%A7%8Bh5%E5%AE%A3%E4%BC%A0%E9%A1%B5/images/showPic5.png)
部分说明:第五页,使用了背景图,由远到近的效果
没有合适的资源?快使用搜索试试~ 我知道了~
中秋主题-Html5宣传动画网页(swiper)
共61个文件
png:39个
js:5个
jpg:5个
需积分: 1 0 下载量 178 浏览量
2024-09-02
09:34:19
上传
评论
收藏 1.65MB ZIP 举报
温馨提示
中秋主题--Html5宣传动画网页(swiper) 1)此demo利用了swiper框架,animat动画库,还有设置js代码来做到自适应移动端,转换单位是rem,与px转换是/100 2)此素材在千图网使用会员下载原创psd,谢谢提供的h5设计稿的作者,利用此设计稿我做成这demo,仅供参考与学习,有做的不好纠正与体谅; 3)demo里面使用的动画animate,有些是利用了第三方动画库,不过大部分是自己自定义写的动画效果;不过一般设置动画都很大程度是根据设计稿的 主题来构思设置啥样的动画效果比较好。
资源推荐
资源详情
资源评论
收起资源包目录
H5-animate.zip (61个子文件)
README.md 2KB
中秋h5宣传页
js
resize.js 340B
loadImg.js 3KB
swiper.min.js 62KB
index.js 5KB
jquery-2.1.3.min.js 82KB
.idea
雇主30强H5.iml 458B
workspace.xml 33KB
移动端模板.iml 458B
modules.xml 278B
encodings.xml 183B
css
animate.css 84KB
loading.css 2KB
index.css 25KB
swiper.min.css 14KB
index.html 7KB
images
page_titleQ.png 2KB
moutain.png 5KB
page_leveas.png 70KB
page2_lamp.png 17KB
jiantou.png 12KB
page3_text2.png 2KB
page_text.png 14KB
page3_text7.png 2KB
page3_text5.png 2KB
page1_btn.png 4KB
page4_text.png 7KB
page4_text3.png 6KB
page_bg.jpg 46KB
page2_bg.jpg 55KB
showPic4.png 136KB
btnLine.png 5KB
page2_text2.png 5KB
page2_text4.png 5KB
page4_bg.jpg 47KB
page5_text2.png 3KB
showPic2.png 188KB
page_beauty.png 130KB
page3_bg.jpg 97KB
page_titleY.png 2KB
page_titleZ.png 2KB
page3_text6.png 2KB
page2_cute.png 46KB
page5_text.png 14KB
page_titleE.png 1KB
showPic5.png 167KB
close.png 2KB
page3_text.png 6KB
page2_text3.png 4KB
arr.png 4KB
music2.png 767B
page3_text4.png 2KB
showPic3.png 258KB
page4_text2.png 6KB
page3_text3.png 1KB
page2_text.png 4KB
showPic.png 172KB
page5_bg.jpg 59KB
page_titleYY.png 2KB
page_sunny.png 11KB
readme.txt 35B
共 61 条
- 1
资源评论
stormsha
- 粉丝: 7306
- 资源: 464
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Cocoa Production Line Optimization Using Network Flow Models
- 基于Python的吸附等温线计算函数实现-建筑工程与环境工程应用
- 基于强化学习的制造业库存管理优化-应用案例研究
- (源码)基于CMSISDSP库的音频信号处理系统.zip
- (源码)基于Qt和深度学习的目标检测及周界预警系统.zip
- (源码)基于Arduino和RaspberryPi的LED面板控制系统.zip
- (源码)基于SpringBoot框架的学生信息管理系统.zip
- JAVA的SpringBoot自动化立体智慧仓库WMS管理系统源码数据库 MySQL源码类型 WebForm
- (源码)基于先进编程技术的机器人手臂控制系统.zip
- (源码)基于SpringBoot和SpringCloud的餐饮管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功