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

原创

html网页设计 2022-10-16 01:49:15 ©著作权

文章标签 css dreamweaver html html静态网页文件包含 文章分类 运维

©著作权归作者所有：来自51CTO博客作者html网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意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.视频演示

66-生日祝福

🧩 2.图片演示

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

四、💒 网站代码

🧱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>
<!--音乐请替换上面两个地址 http://other.web.ra01.sycdn.kuwo.cn/resource/n3/47/55/72304795.mp3 -->
<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>

🏠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)}