新年快到了.是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码 ❤爱情墙❤html5+css3+js 实现全屏七夕表白页面。赶紧学会了，来制作属于我们程序员的浪漫吧！

❤元旦节表白3D相册,在元旦节前夜, 我们的留言区开放给你！快来秀出你的别样表白方式，和你心仪的那个ta表白吧！❤

❤爱情墙❤html5+css3+js 实现全屏七夕表白页面,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!

❉ ❉❤爱情墙❤html5+css3+js 实现全屏七夕表白页面 (可自定义文字)

在这里插入图片描述

❉ html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>全屏七夕表白</title>
    <script async src="http://c.cnzz.com/core.php"></script>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <div class="flowtime">
        <div class="ft-section section-1" data-id="section-1">
            <div id="/section-1/page-1" class="ft-page page-1" data-id="page-1">
                <p class="text1"><span id="text-75" contenteditable="true">晗晗</span> ❤ <span id="text-76" contenteditable="true">小宇</span> <span id="text-77" contenteditable="true">一生一世</span></p>
                <p class="text2">请按键盘 "↓" <span id="text-78" contenteditable="true">开始倾听我的表白</span></p>
            </div>
            <div id="/section-1/page-2" class="ft-page page-2" data-id="page-2">
                <p class="top-text" id="text-1" contenteditable="true">过去的张千一直是一个人生活，享受着孤独，也憧憬着爱情。</p>
                <img src='img/iali63.jpg' alt="过去的张千一直是一个人生活，享受着孤独，也憧憬着爱情。" />
            </div>
            <div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3">
                <h2 class="text" id="text-2" contenteditable="true">一个人的长廊</h2>
                <img src='img/iali35.jpg' alt="一个人的长廊" />
            </div>
            <div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4">
                <h2 class="center-text" id="text-3" contenteditable="true">一个人的山岗</h2>
                <img src='img/iali6.jpg' alt="一个人的山岗" />
            </div>
        </div>
            <div id="/section-8/page-2" class="ft-page page-47 top-text" data-id="page-2">
                <img src='img/iali58.jpg' />
                <h3>
                    <span id="text-58" contenteditable="true">想想后面还有一辈子</span>
                    <span id="text-59" contenteditable="true">张千好开心</span>
                    <span id="text-60" contenteditable="true">因为可以和她</span>
                    <span id="text-61" contenteditable="true">去全世界好多地方玩</span></h3>

            </div>
            <div id="/section-8/page-3" class="ft-page page-48 left-img" data-id="page-3">
                <p><span id="text-62" contenteditable="true">张千也会继续努力</span><br /><span id="text-63" contenteditable="true">为了他和Yvonne的梦之城堡</span></p>
                <img src='img/iali65.jpg' />
            </div>
            <div id="/section-8/page-4" class="ft-page page-49 full-img" data-id="page-4">
                <img src='img/iali71.jpg' />
                <p class="text">
                    <span class='text' id="text-64" contenteditable="true">张千很幸福，因为他找到了Yvonne。他相信后面的每天都会是快乐的</span><br />
                    <span class='text' id="text-65" contenteditable="true">简简单单，体会着与Yvonne在一起的每一个刻</span>
                </p>
            </div>
        <div class="ft-section section-9" data-id="section-9">
            <div id="/section-9/page-1" class="ft-page page-52 full-img" data-id="page-1">
                <h3 id="text-71" contenteditable="true">愿得一人心，白首不相离</h3>
                <img src='img/iali20.jpg' />
            </div>
            <div id="/section-9/page-2" class="ft-page page-53" data-id="page-2">
                <img src='img/iali68.jpg' alt='happy birthday' />
                <h3 id="text-72" contenteditable="true">情人节快乐</h3>
            </div>
            <div id="/section-9/page-3" class="ft-page page-54 center-img" data-id="page-3">
                <div class="center-img">I love you</div>
            </div>
            <div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4">
                <img src='img/14915.jpg' />
                <p class="text">
                    <span id="text-73" contenteditable="true">花花和pite的故事会一直继续下去。</span><br />
                    <span id="text-74" contenteditable="true">无论精彩、平淡都会是他们喜欢的。</span><br />
                    <br />
                    <br />
                    <span> -- 按“Esc"键有惊喜</span>
                </p>
            </div>
        </div>
    </div>
    <div class="nojavascript">您的浏览器版本太低或禁用了javascript，无法正常浏览本页面</div>

    </div>

    <audio id="bgmMusic" src="music/saveme.mp3" autoplay="autoplay" loop preload="auto" type="audio/mp3"></audio>

    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/all.min.js"></script>
    <script src="js/love.min.js"></script>
    <div class="mPower"><span id="on" title="点击暂停"></span><span id="off" title="点击播放"></span></div>
</body>
   ...
完整代码在下方↓公众号获取
</html>

❉ js部分

(function(h, o, g) {
    
    
    var p = function() {
    
    
        for (var b = /audio(.min)?.js.*/, a = document.getElementsByTagName("script"), c = 0, d = a.length; c < d; c++) 
            ready: function() {
    
    
                return function(b) {
    
    
                    var a = window,
                        c = false,
                        d = true,
                        e = a.document,
                        i = e.documentElement,
                        f = e.addEventListener ? "addEventListener" : "attachEvent",
                        k = e.addEventListener ? "removeEventListener" : "detachEvent",
                        n = e.addEventListener ? "" : "on",
                        m = function(l) {
    
    
                            if (!(l.type == "readystatechange" && e.readyState != "complete")) {
    
    
                                (l.type == "load" ? a : e)[k](n + l.type, m, false);
                                if (!c && (c = true)) b.call(a, l.type ||
                                    l)
                            }
                        },
                        q = function() {
    
    
                            try {
    
    
                                i.doScroll("left")
                            } catch (l) {
    
    
                                setTimeout(q, 50);
                                return
                            }
                            m("poll")
                        };
                    if (e.readyState == "complete") b.call(a, "lazy");
                    else {
    
    
                        if (e.createEventObject && i.doScroll) {
    
    
                            try {
    
    
                                d = !a.frameElement
                            } catch (r) {
    
    }
                            d && q()
                        }
                        e[f](n + "DOMContentLoaded", m, false);
                        e[f](n + "readystatechange", m, false);
                        a[f](n + "load", m, false)
                    }
                }
            }()
        }
    };
    g[o] = function(b, a) {
    
    
        this.element = b;
        this.wrapper = b.parentNode;
        this.source = b.getElementsByTagName("source")[0] || b;
        this.mp3 = function(c) {
    
    
            var d = c.getElementsByTagName("source")[0];
            return c.getAttribute("src") ||
                (d ? d.getAttribute("src") : null)
        }(b);
        this.settings = a;
        this.loadStartedCalled = false;
        this.loadedPercent = 0;
        this.duration = 1;
        this.playing = false
    };
    g[o].prototype = {
    
    
        updatePlayhead: function() {
    
    
            this.settings.updatePlayhead.apply(this, [this.element.currentTime / this.duration])
        },
        skipTo: function(b) {
    
    
            if (!(b > this.loadedPercent)) {
    
    
                this.element.currentTime = this.duration * b;
                this.updatePlayhead()
            }
        },
        load: function(b) {
    
    
            this.loadStartedCalled = false;
            this.source.setAttribute("src", b);
            this.element.load();
            this.mp3 = b;
            g[h].events.trackLoadProgress(this)
        },
        loadError: function() {
    
    
            this.settings.loadError.apply(this)
        },
        init: function() {
    
    
            this.settings.init.apply(this)
        },
        loadStarted: function() {
    
    
            if (!this.element.duration) return false;
            this.duration = this.element.duration;
            this.updatePlayhead();
            this.settings.loadStarted.apply(this)
        },
        loadProgress: function() {
    
    
            if (this.element.buffered != null && this.element.buffered.length) {
    
    
                if (!this.loadStartedCalled) this.loadStartedCalled = this.loadStarted();
                this.loadedPercent = this.element.buffered.end(this.element.buffered.length - 1) / this.duration;
                this.settings.loadProgress.apply(this, [this.loadedPercent])
            }
        },
        playPause: function() {
    
    
            this.playing ? this.pause() : this.play()
        },
        play: function() {
    
    
            /(ipod|iphone|ipad)/i.test(navigator.userAgent) && this.element.readyState == 0 && this.init.apply(this);
            if (!this.settings.preload) {
    
    
                this.settings.preload = true;
                this.element.setAttribute("preload", "auto");
                g[h].events.trackLoadProgress(this)
            }
            this.playing = true;
            this.element.play();
            this.settings.play.apply(this)
        },
        pause: function() {
    
    
            this.playing = false;
            this.element.pause();
            this.settings.pause.apply(this)
        },
        setVolume: function(b) {
    
    
            this.element.volume = b
        },
        trackEnded: function() {
    
    
            this.skipTo.apply(this, [0]);
            this.settings.loop || this.pause.apply(this);
            this.settings.trackEnded.apply(this)
        }
    };
    var j = function(b, a) {
    
    
        var c = [];
        a = a || document;
        if (a.getElementsByClassName) c = a.getElementsByClassName(b);
        else {
    
    
            var d, e, i = a.getElementsByTagName("*"),
                f = RegExp("(^|\\s)" + b + "(\\s|$)");
            d = 0;
            for (e = i.length; d < e; d++) f.test(i[d].className) && c.push(i[d])
        }
        return c.length > 1 ? c : c[0]
    }
})("audiojs", "audiojsInstance", this);
   ...
 完整代码在下方↓公众号获取