情人节程序员用HTML网页表白【爱心_文字音乐告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

优质内容贡献

于 2024-01-07 09:00:27 发布

阅读量332

点赞数 9

文章标签： html html5 css 课程设计 javascript 前端

本文链接：https://blog.csdn.net/qq_524614081/article/details/135435870

版权

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!--
 * @Author: your name
 * @Date: 2021-06-11 11:26:48
 * @LastEditTime: 2021-06-11 11:27:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \03\index.html
-->
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="static/css/default.css" type="text/css" rel="stylesheet">
    <link href="static/css/audioAutoPlay.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script type="text/javascript" src="static/js/garden.js"></script>
    <script type="text/javascript" src="static/js/functions.js"></script>
    <title>XX，我爱你 </title>

    <body>
        <img id="music_ico" onclick="clickMusic()" src="static/image/music_ico.png" alt="">
        <audio id="audio" style="display: none;" src="static/music/bg_music.mp3" preload="auto" loop="loop"></audio>
        <div id="mainDiv">
            <div style="height: 100%">
                <div id="loveHeart">
                    <canvas id="garden"></canvas>
                    <div id="words">
                        <div id="messages">
                            XX, 这是我们认识的第
                            <div id="elapseClock"></div>
                        </div>
                        <div id="loveu">
                            永远爱你，一辈子，不分离！<br/>
                            <div class="signature">- 最爱你的人</div>

                        </div>
                    </div>
                </div>

                <div id="code">
                    <span class="comments">XX：</span><br />
                    <span class="space" />
                    <span class="comments">我爱你</span><br />
                    <span class="space" />
                    <span class="comments">
				只有在你的微笑里，我才有呼吸，还贪恋着你的风情，诱惑着你的神秘，埋葬了我的爱情，脉脉之情如一溪春水，快刀难斩断，随着天各一方的时间越来越长，我的思念也越来越深，我很想找一个万籁俱寂的深夜或一个阳光明媚的早晨，把许多心底的惆怅、寂寞向你倾诉。
				某某，我们的故事是最感人，最真实的，早安，我永恒的爱人，虽然我尚未起床，但思想已经飞到你的身边来了，不管今世也好来世也好，我所要的只有你。我要与你同坐在有着月光的草坪上，一起遥望着繁星点缀的夜空，讲述那人间古老的爱情神话。人生不止，寂寞不已。寂寞人生爱无休，寂寞是爱永远的主题。
				</span><br />
                    <span class="space" />
                    <span class="comments">某某，在这没有月的漆黑的夜里，我独自坐在窗前写着这封信，希望睡前可以吻你；希望睡时可以抱着你；希望醒来可以看到你，有你的日子，一切都是那么美好，风和日丽，鲜花遍地；没你的日子，白昼是那么的黯淡，黑夜是那么的漫长。你的话已经锁在我的记忆里了，那钥匙你就替我保管一辈子吧。如果你冷，我将你拥入怀中；如果你哭，我替你擦去泪痕。你像那天边的云，飘泊不定，叫人难以追寻；你像那水中的萍，流移四方，叫我难以琢磨。这样的习惯也是一种甜蜜的负担，思念你早已成为我生活中不可缺少的习惯。思念就像河流般，滔滔不绝地流向大海，流向我的心房，当我闭上双眼，你的身影又浮现在我的眼前，一些路我们并肩走过，一些故事我们就是主人公，一首歌我们对唱了那么久，永远不变的是心中深藏的对爱的执着。如果，我只有一天的生命，我会去找你，并告诉你，我是如此的依恋你。我们那两颗充满柔情和陶醉的心永远在一起，我愿做天上的星星，给你永恒的光芒，永远守候在你身边。盼你在每一次想你的瞬间，爱你在每一秒呼吸的间隙。不知为什么，只要有你在我身边，我的心便不再惶惶不安。有你的日子你就是一切，没你的日子一切都是你。
				某某，我想告诉你，自从有了你，我觉得整个世界都在向我点头微笑，你那充满朝气的身影总是伴着月光入我梦来，让我牵挂不停。还记得我俩的初遇。那一瞬间，时间就像静止了一般，你的气质让我觉得惊喜，认识你我的生活充满生机，爱上你我的生活充满激情。
				</span><br />
                    <span class="space" />
                    <span class="comments">某某，保留一个最浪漫的故事，给你一声祝福，一个kiss，爱你直到永远！
				某某，理解我吗？我不是弱智，但我会傻傻的爱你到永远。某某，我只想和你白头到老，美轮美奂的你编织着神话，创造着奇迹，只因让我遇到你。接受我，好吗？
				</span><br />

                </div>


            </div>
        </div>
   
    </body>
    <script type="text/javascript" src="static/js/audioAutoPlay.js"></script>
    <script type="text/javascript" src="static/js/default.js"></script>
    <style>
    </style>

</html>

2.CSS代码


body {
    margin: 0;
    padding: 0;
    background: #ffe;
    font-size: 12px;
    overflow: auto
}

#mainDiv {
    width: 100%;
    height: 100%
}

#loveHeart {
    padding-left: 10%;
    float: none;
    margin: 10% auto;
    width: 670px;
    height: 625px
}

#garden {
    width: 100%;
    height: 100%
}

#elapseClock {
    text-align: right;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px
}

#words {
    font-family: "sans-serif";
    width: 505px;
    font-size: 24px;
    color: #666
}

#messages {
    display: none
}

#elapseClock .digit {
    font-family: "digit";
    font-size: 36px
}

#loveu {
    padding: 5px;
    font-size: 22px;
    margin-top: 80px;
    margin-right: 120px;
    text-align: right;
    display: none
}

#loveu .signature {
    margin-top: 10px;
    font-size: 20px;
    font-style: italic
}

#code {
    float: none;
    margin: 0 auto;
    width: 440px;
    height: 400px;
    '' color: #333;
    font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
    font-size: 18px;
}

#code .string {
    color: #2a36ff
}

#code .keyword {
    color: #7f0055;
    font-weight: bold
}

#code .placeholder {
    margin-left: 15px
}

#code .space {
    margin-left: 23px
}

#code .comments {
    color: palevioletred
}

#copyright {
    margin-top: 10px;
    text-align: center;
    width: 100%;
    color: #666
}

#errorMsg {
    width: 100%;
    text-align: center;
    font-size: 24px;
    position: absolute;
    top: 100px;
    left: 0
}

#copyright a {
    color: #666
}

三、精彩专栏

看到这里了就 【点赞，好评，收藏】 三连支持下吧，你的支持是我创作的动力

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

优质内容贡献

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
情人节程序员用HTML网页表白【爱心_文字音乐告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作）。
复制链接

扫一扫