最終效果與總結(jié)
整個(gè)七夕主題到這節(jié)都已經(jīng)完全講解完畢了，最終會(huì)把所有設(shè)置的參數(shù)都合并到了confi配置文件中，同時(shí)也增加了一些配置，例如正比縮放，這樣可以保持頁面布局縮放看起來不會(huì)變型
這個(gè)案例不算很難，但是把前端做動(dòng)畫的一些精髓已經(jīng)講透了。運(yùn)用的技術(shù)基本就是H5+JS+CSS3，但是每個(gè)部分的實(shí)現(xiàn)都會(huì)有很多知識(shí)點(diǎn)的涉及，這里大體的總結(jié)下
- 自適應(yīng)分辨率的問題可以采用的是JS+百分比布局處理
- 通過合成"雪碧圖"解決圖片加載與資源占用的問題
- 通過CSS3的animation實(shí)現(xiàn)幀動(dòng)畫，并且可以控制狀態(tài)
- 布局除了left.top布局外，還可以使用最新的css3的transform處理
- 元素的變化，可以通過設(shè)置translate3d啟動(dòng)GPU加速
- 可以用CSS3的transition做漸變動(dòng)畫
- HTML5音頻的使用
- 采用promise可以解決異步編程的邏輯嵌套問題
- 代碼組織的一些思路
整個(gè)案例涉及的東西都是我們?nèi)粘ｉ_發(fā)能夠使用到的一些手段，希望可以通過這個(gè)案例把前端的一些方面的知識(shí)點(diǎn)給融合貫穿起來，從而得到系統(tǒng)透徹的理解，并且能有舉一反三，融匯貫通的效果！
<!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>
<!-- 慕課網(wǎng)logo圖 -->
<div class="logo"></div>
</li>
</ul>
<!-- 雪花 -->
<div id="snowflake"></div>
<!-- 小男孩 -->
<div id="boy" class="charector"></div>
</div>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
