• 情人节程序员用HTML网页表白【生日祝福】 HTML5生日祝福网页源码 HTML+CSS+JavaScript

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

    文章目录

    一、网页介绍

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

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

    一、网页效果

    在这里插入图片描述

    在这里插入图片描述

    二、代码展示

    1.HTML代码

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

    

DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>生日祝福网页title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/jquery.js">script>
<script src="js/garden.js">script>
<script src="js/functions.js">script>
head>
<body>
<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">亲爱的宝贝：span><br />
<span class="comments">在你生日到来之际，我将快乐的音符，作为礼物送给你，愿您拥有365个美丽的日子，衷心地祝福你，生日快乐！在此诚挚地献上我的三个祝愿：一愿你身体健康；二愿你幸福快乐；三愿你万事如意！span><br /><br />
<span class="comments">送你一个生日蛋糕，祝你生日快乐！第一层，体贴！第二层，关怀！第三层，浪漫！第四层，温馨！中间夹层，甜蜜！祝你天天都有一份好心情！span><br />
<br><br>
<span class="comments"><b class="bb">晓明 ★ bobyb>span>
div>
<div id="loveHeart">
<canvas id="garden">canvas>
<div id="words">
<div id="messages">
<img src="images/zsr.png">
div>
<div id="loveu">
<img src="images/sr.png">
div>
div>
div>
div>
<div id="copyright">
<center>
<audio id="main_audio" autoplay="autoplay" preload="auto" loop>
<source src="http://other.web.ra01.sycdn.kuwo.cn/resource/n3/47/55/72304795.mp3" type="audio/mpeg" />
<embed id="main_audio_ie8" hidden="true" autostart="true" height="0" width=0 loop="true" src="http://other.web.ra01.sycdn.kuwo.cn/resource/n3/47/55/72304795.mp3" autoplay="autoplay" />
audio>

<a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);">a>
div>
center>
div>
div>
<script type="text/javascript">
		var offsetX = $("#loveHeart").width() / 2;
		var offsetY = $("#loveHeart").height() / 2 - 55;
		var together = new Date();
		together.setHours(8);
		together.setMinutes(0);
		together.setSeconds(0);
		together.setMilliseconds(0);
		
		if (!document.createElement('canvas').getContext) {
			var msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "您的浏览器已经过时!请使用非IE浏览器进行预览"; 
			document.body.appendChild(msg);
			$("#code").css("display", "none")
			$("#copyright").css("position", "absolute");
			$("#copyright").css("bottom", "10px");
		    document.execCommand("stop");
		} else {
			setTimeout(function () {
				startHeartAnimation();
			}, 5000);

			timeElapse(together);
			setInterval(function () {
				timeElapse(together);
			}, 500);

			adjustCodePosition();
			$("#code").typewriter();
		}
	script>
div>
div>
body>
html>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84

    三、精彩专栏

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

  • 相关阅读:
    Seatunnel系列之：Apache Iceberg sink connector和往Iceberg同步数据任务示例
    【mia】服务管理流程
    python+vue+elementui花卉种植技术网站
    Redis简易入门15招
    LeetCode 2349. 设计数字容器系统（SortedSet）
    使用C++11实现对象池
    JS教程之使用 ElectronJS、VueJS、SQLite 和 Sequelize ORM 从 A 到 Z 创建多对多 CRUD 应用程序
    网站被劫持了怎么办
    用C语言解决三个整数比大小,x,y,z三个整数求最小整数，从键盘上输入3个不同的整数×，y,Z,请设计一个算法找出其中最小的数，并画出流程图。
    Kubernetes - Kubernetes详解；安装部署（一）
  • 原文地址：https://blog.csdn.net/qq_365392777/article/details/127425376