你的位置:首页 > 网页设计

[网页设计]html5七夕情人节送花动画特效


分享一款html5七夕情人节送花动画特效是一款类似动画短片的七夕情人节男士买花送花动画场景。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

<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>       <!-- 慕课网logo图 -->       <div class="logo">祝天下有情人终成眷属</div>     </li>   </ul>   <!-- 雪花 -->   <div id="snowflake"></div>   <!-- 小男孩 -->   <div id="boy" class="charector"></div> </div>

via:http://www.w2bc.com/article/60851