首页分享 HTML+CSS+JS制作一个生日祝福网站(程序员专属情人节表白网站)

HTML+CSS+JS制作一个生日祝福网站(程序员专属情人节表白网站)

来源：花匠小妙招时间：2024-12-02 19:58

❤ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业：【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

文章目录二、网站介绍三、网站效果▶️1.视频演示 2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码

二、网站介绍

网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3） js文件包含：页面炫酷效果实现

三、网站效果

▶️1.视频演示

2.图片演示

在这里插入图片描述

四、网站代码

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">晓明 ★ boby</b></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> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586

CSS样式代码

body,button,input,textarea{font-family:微软雅黑,sans-serif}a{text-decoration:none}body{margin:0;padding:0;background:#fbdbef;font-size:12px;overflow:auto}#mainDiv{width:100%;height:100%}#loveHeart{float:left;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:微软雅黑;width:500px;font-size:24px;color:#666}#messages{margin-top:80px;margin-left:80px;display:none}#elapseClock .digit{font-family:digit;font-size:36px}#loveu{padding:5px;font-size:22px;margin-top:55px;margin-left:80px;text-align:text;display:none}#loveu .signature{margin-top:10px;font-size:20px;font-style:italic}#clickSound{display:none}#code{float:left;width:480px;height:480px;color:#333;font-family:微软雅黑;font-size:18px;line-height:26px}#code .string{color:#2a36ff}#code .keyword{color:#7f0055;font-weight:700}#code .space{margin-left:7px}#code .comments{color:#f180c5}#copyright{margin-top:10px;text-align:center;width:100%;color:#f180c5}#errorMsg{width:100%;text-align:center;font-size:24px;position:absolute;top:100px;left:0}#copyright a{color:#f180c5}.bb{display:block;text-align:center;padding-lef:100px;font-size:40px;color:#f180c5}#yyxz{position:fixed;bottom:6.8em;left:8%;z-index:9999}body{background:url(../images/houtaibizhi.jpg)} 123456