剑客
关注科技互联网

H5+JS+CSS3实现七夕言情

课程简介

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

课程提纲

第1章 效果预览与介绍

本章展示整个课程的效果以及课程中的一些注意点

第2章 页面的搭建与切换

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

第3章 小男孩的动作的分解

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

第4章 流程的编写与封装

本章讲解了异步编程是怎么回事,视觉差效果又是怎么回事。

第5章 主题页面一

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

第6章 主题页面二

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

第7章 主题页面三

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

第8章 背景音乐

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

第9章 最终效果

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

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址