星空网 > 软件开发 > 网页设计

html5七夕情人节送花动画特效

分享一款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




原标题:html5七夕情人节送花动画特效

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流