• 基于jquery结婚电子请柬特效素材


    分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙。效果图如下:

    在线预览    源码下载

    实现的代码。

    html代码:

     <div class="container">
            <!-- 移动的婚车 -->
            <div class="car">
                <img class="u-car" src="images/moveCar.png" />
                <img class="u-dog" src="images/ballon.gif" />
            </div>
            <!-- 首页 -->
            <div class="home">
                <div class="nav">
                    <ul>
                        <li><span id="to-picture">相册</span></li>
                        <li><span id="to-invitation">邀请函</span></li>
                        <li><span id="to-wall">祝福墙</span></li>
                        <li><span id="to-address">婚礼地点</span></li>
                    </ul>
                </div>
            </div>
            <!-- 邀请函 -->
            <div class="invitation">
                <!--<span id="invite-return" class="u-return">返回首页</span>-->
                <img class="u-return" id="invite-return" src="images/btn_return.png" />
                <div class="invitation-content">
                </div>
            </div>
            <!-- 婚纱照 -->
            <div class="wedding-photos">
                <div>
                    <img src="images/photo1.jpg" /></div>
                <div>
                    <img src="images/photo2.jpg" /></div>
                <div>
                    <img src="images/photo3.jpg" /></div>
                <div>
                    <img src="images/photo4.jpg" /></div>
                <div>
                    <img src="images/photo5.jpg" /></div>
            </div>
            <!-- 场景六 -->
            <div class="six-box">
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
                <div>
                </div>
            </div>
            <!-- 场景七祝福墙内容 -->
            <div class="seven-box">
                <img id="blessing-return" class="u-return" src="images/btn_return.png" />
                <div class="clickMe">
                    点我送祝福</div>
                <div class="seven-content">
                    <div class="note-a1">
                    </div>
                    <div class="note-a2">
                    </div>
                    <div class="note-a3">
                    </div>
                    <div class="note-a4">
                    </div>
                    <div class="note-a5">
                    </div>
                    <div class="note-a6">
                    </div>
                    <div class="note-a7">
                    </div>
                    <div class="note-a8">
                    </div>
                    <div class="note-a9">
                    </div>
                    <div class="note-a10">
                    </div>
                    <div class="note-a11">
                    </div>
                    <div class="note-a12">
                    </div>
                    <div class="note-1">
                        一定要幸福哦~</div>
                    <div class="note-2">
                        祝你们白头偕老!</div>
                    <div class="note-3">
                        早生贵子~</div>
                    <div class="note-4">
                        新婚快乐~</div>
                    <div class="note-5">
                        生个宝宝认我做干妈!</div>
                    <div class="note-6">
                        喜结良缘O(∩_∩)O哈哈哈~</div>
                    <div class="note-1">
                        一定要幸福哦~</div>
                    <div class="note-2">
                        祝你们白头偕老!</div>
                    <div class="note-3">
                        早生贵子~</div>
                    <div class="note-4">
                        新婚快乐~</div>
                    <div class="note-5">
                        生个宝宝认我做干妈!</div>
                    <div class="note-6">
                        喜结良缘O(∩_∩)O哈哈哈~</div>
                </div>
            </div>
            <!-- 照片墙 -->
            <div class="picture-wall">
                <img class="u-return" id="picture-return" src="images/btn_return.png" />
                <div class="pic0 picRow">
                    <img src="images/pic0.jpg" /></div>
                <div class="pic1 picRow">
                    <img src="images/pic1.jpg" /></div>
                <div class="pic2 picCol">
                    <img src="images/pic2.jpg" /></div>
                <div class="pic3 picCol">
                    <img src="images/pic3.jpg" /></div>
                <div class="pic4 picCol">
                    <img src="images/pic4.jpg" /></div>
                <div class="pic5 picCol">
                    <img src="images/pic5.jpg" /></div>
                <div class="pic6 picRow">
                    <img src="images/pic6.jpg" /></div>
                <div class="pic7 picRow">
                    <img src="images/pic7.jpg" /></div>
                <div class="pic8 picRow">
                    <img src="images/pic8.jpg" /></div>
                <div class="pic9 picCol">
                    <img src="images/pic9.jpg" /></div>
                <div class="pic10 picCol">
                    <img src="images/pic10.jpg" /></div>
                <div class="pic11 picRow">
                    <img src="images/pic11.jpg" /></div>
            </div>
            <!-- 婚礼地址 -->
            <div class="address">
                <img class="u-return" id="address-return" src="images/btn_return.png" />
                <img class="u-love" src="images/love.gif" />
                <img src="images/address.jpg" />
            </div>
        </div>
        <!-- 遮罩层 -->
        <div class="mask">
        </div>
        <div class="pop-box">
            <h1>
                送上祝福语</h1>
            <textarea id="write">写上您的祝福吧~</textarea>
            <div class="u-sure" id="uSure">
                确定</div>
        </div>
        <!-- 背景音乐 -->
        <embed src="#" width="0" height="0" autostart="true" loop="true">
        <object data="#" type="application/x-mplayer2" width="0" height="0">    
            <param name="src" value="music.mp3">
            <param name="autostart" value="1">
            <param name="playcount" value="0">
        </object>

    via:http://www.w2bc.com/Article/40317

  • 相关阅读:
    Pthon3各平台的安装
    scrapy爬虫 简单入门
    自动定时打卡7.13
    centos7+python3+selenium+chrome
    在Ubuntu安装kubernetes
    在Ubuntu下安装Jenkins
    在Ubuntu安装Docker
    猫眼100 爬虫
    python 招聘数据分析
    mysql8.0.19忘记密码
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4530419.html
Copyright © 2020-2023  润新知