WEB前端开发

H5+JS+CSS3的动画案例学习与欣赏【含视频教程】

一个优秀的H5+JS+CSS3的动画案例，一直都是我们H5学习的好资源。特别是对于H5、js和css3有一定了解的同学。

这个经典的H5+JS+CSS3的动画案例适合初中级的H5前端开发人员。

总得来说，25学堂今天分享的这个H5+JS+CSS3的动画案例：老师讲解的步骤很清晰，讲解很到位，完成一个小项目，成就感爆棚。

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

h5开发案例

干净明了的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>