为了账号安全,请及时绑定邮箱和手机立即绑定

H5+JS+CSS3实现七夕言情

学习人数
难度级别 高级
课程时长 2小时25分
综合评分 9.5
79人评价 查看评价
9.8 内容实用
9.3 简洁易懂
9.5 逻辑清晰

简介:七夕邻近,才子佳人们又要开始约会了,为了心爱的她献上一份不一样的浪漫。本课程中使用面向接口的编程方式,采用H5+JS+CSS3的混合使用实现整个功能。课程当中总共分为3个主题场景图,多个精灵图以及雪碧图,实现了静与动的完美结合,并且由浅入深的将整个案例拆分讲解。

第1章 效果预览与介绍
本章展示整个课程的效果以及课程中的一些注意点

第2章 页面的搭建与切换
本章讲解了整个效果的结构搭建以及背景图的滚动切换效果,并介绍如何进行代码的封装。

第3章 小男孩的动作的分解
本章讲解如何实现自适应布局,小男孩整个流程的动作拆解以及运动轨迹的处理。

第4章 流程的编写与封装
本章讲解了异步编程是怎么回事,视觉差效果又是怎么回事。

第5章 主题页面一
本章主要是对第一副图中动画的讲解,太阳和云分别是如何实现的。

第6章 主题页面二
本章主要是对第二副图中动画的讲解,页面是如何布局,开关门的效果如何实现,人物坐标如何改变,以及灯光和小鸟是如何实现的。

第7章 主题页面三
本章主要是对第三副图中动画的讲解,页面如何布局,星星的闪动和河水的流动是怎么实现的,人物的运动轨迹如何处理,转身的动作又是怎么回事,还有logo的晃动以及最后唯美的飘花都是怎么实现的。

第8章 背景音乐
本章讲解了如何使用H5中的audio实现整个课程中的音乐效果。

第9章 最终效果
此章为本课程的最后一章,讲解了整个案例效果中的一些注意点及效果的展示

讲师提示

Aaron艾伦 Web前端工程师
课程须知
本课程为高级案例课程,其中所用的大部分知识点不做深入剖析,只讲解如何使用,部分代码需要由你自己填充。 需要具备如下知识: 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想
老师告诉你能学到什么?
1、如何实现页面的无缝滚动 2、如何实现视觉差效果 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果
意见反馈 常见问题 APP下载
官方微信