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

在线预览    源码下载