WEB前端開發(fā)

H5+JS+CSS3的動畫案例學(xué)習(xí)與欣賞【含視頻教程】

一個優(yōu)秀的H5+JS+CSS3的動畫案例，一直都是我們H5學(xué)習(xí)的好資源。特別是對于H5、js和css3有一定了解的同學(xué)。

這個經(jīng)典的H5+JS+CSS3的動畫案例適合初中級的H5前端開發(fā)人員。

總得來說，25學(xué)堂今天分享的這個H5+JS+CSS3的動畫案例：老師講解的步驟很清晰，講解很到位，完成一個小項目，成就感爆棚。

H5+JS+CSS3的動畫案例演示地址：http://www.plushare.cn/

h5開發(fā)案例

干凈明了的HTML5源碼如下：

<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_bottom"></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_bottom"></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>