最终效果与总结，H5+JS+CSS3实现七夕言情教程-慕课网

最终效果与总结

整个七夕主题到这节都已经完全讲解完毕了，最终会把所有设置的参数都合并到了confi配置文件中，同时也增加了一些配置，例如正比缩放，这样可以保持页面布局缩放看起来不会变型

这个案例不算很难，但是把前端做动画的一些精髓已经讲透了。运用的技术基本就是H5+JS+CSS3，但是每个部分的实现都会有很多知识点的涉及，这里大体的总结下

自适应分辨率的问题可以采用的是JS+百分比布局处理
通过合成"雪碧图"解决图片加载与资源占用的问题
通过CSS3的animation实现帧动画，并且可以控制状态
布局除了left.top布局外，还可以使用最新的css3的transform处理
元素的变化，可以通过设置translate3d启动GPU加速
可以用CSS3的transition做渐变动画
HTML5音频的使用
采用promise可以解决异步编程的逻辑嵌套问题
代码组织的一些思路

整个案例涉及的东西都是我们日常开发能够使用到的一些手段，希望可以通过这个案例把前端的一些方面的知识点给融合贯穿起来，从而得到系统透彻的理解，并且能有举一反三，融汇贯通的效果！

任务

?不会了怎么办

||

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>七夕主题</title> <link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/55c16d94000109f300000000.css' /> <link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/55c16dab0001286100000000.css' /> <link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/55c16dc00001fa1a00000000.css' /> <link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/55c16dda0001113100000000.css' /> <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script> <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script> <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55c16c910001e21b00000000.js"></script> </head> <body> <div id='content'> <ul class='content-wrap'>  <li>  <div class="a_background"> <div class="a_background_top"></div> <div class="a_background_middle"></div> <div class="a_background_botton"></div> </div>  <div class="cloudArea"> <div class="cloud cloud1"></div> <div class="cloud cloud2"></div> </div>  <div id="sun"></div> </li>  <li>  <div class="b_background"></div> <div class="b_background_preload"></div>  <div class="shop"> <div class="door"> <div class="door-left"></div> <div class="door-right"></div> </div>  <div class="lamp"></div> </div>  <div class="bird"></div> </li>  <li>  <div class="c_background"> <div class="c_background_top"></div> <div class="c_background_middle"></div> <div class="c_background_botton"></div> </div>  <div class="girl"></div> <div class="bridge-bottom"> <div class="water"> <div id="water1" class="water_1"></div> <div id="water2" class="water_2"></div> <div id="water3" class="water_3"></div> <div id="water4" class="water_4"></div> </div> </div>  <ul class="stars"> <li class="stars1"></li> <li class="stars2"></li> <li class="stars3"></li> <li class="stars4"></li> <li class="stars5"></li> <li class="stars6"></li> </ul>  <div class="logo"></div> </li> </ul>  <div id="snowflake"></div>  <div id="boy" class="charector"></div> </div> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

||

9-1 最终效果与总结