HTML+CSS+JS网页表白代码大全(浪漫的html表白源代码)

最新推荐文章于 2024-05-11 10:05:08 发布
最新推荐文章于 2024-05-11 10:05:08 发布
阅读量1.9k 收藏 20
点赞数 2
分类专栏： web前端 文章标签： javascript html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73081085/article/details/127130779
版权

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

📂文章目录

二、📚网站介绍

📒网站文件方面：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.视频演示

42-圣诞节3d相册(含音乐开关)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    
    <script src="js/jquery.min.js"></script>

    <link type="text/css" href="./css/style.css" rel="stylesheet" />
    <style>
      html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        h1{text-align: center;}
        #music{
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
  </head>
  <body>
    <!-- <audio autoplay="autopaly">
      <source src="sjzmd.mp3" type="audio/mp3" />
    </audio> -->
    <audio src="sd.mp3" controls="controls" autoplay="autoplay" loop="loop" id="music"></audio>
      <div id="jsi-snow-container" class="container"></div>
      <div class="box">
        <ul class="minbox">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <ol class="maxbox">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>

    <script>
      var RENDERER = {
          SNOW_COUNT: {
              INIT: 100,
              DELTA: 1
          },
          BACKGROUND_COLOR: 'hsl(%h, 50%, %l%)',
          INIT_HUE: 180,
          DELTA_HUE: 0.1,
  
          init: function() {
              this.setParameters();
              this.reconstructMethod();
              this.createSnow(this.SNOW_COUNT.INIT * this.countRate, true);
              this.render();
          },
          setParameters: function() {
              this.$window = $(window);
  
              this.$container = $('#jsi-snow-container');
              this.width = this.$container.width();
              this.height = this.$container.height();
              this.center = {
                  x: this.width / 2,
                  y: this.height / 2
              };
              this.countRate = this.width * this.height / 500 / 500;
              this.canvas = $('<canvas />').attr({
                  width: this.width,
                  height: this.height
              }).appendTo(this.$container).get(0);
              this.context = this.canvas.getContext('2d');
  
              this.radius = Math.sqrt(this.center.x * this.center.x + this.center.y * this.center.y);
              this.hue = this.INIT_HUE;
              this.snows = [];
          },
          reconstructMethod: function() {
              this.render = this.render.bind(this);
          },
          createSnow: function(count, toRandomize) {
              for (var i = 0; i < count; i++) {
                  this.snows.push(new SNOW(this.width, this.height, this.center, toRandomize));
              }
          },
          render: function() {
              requestAnimationFrame(this.render);
  
              var gradient = this.context.createRadialGradient(this.center.x, this.center.y, 0, this.center.x, this.center.y, this.radius),
                  backgroundColor = this.BACKGROUND_COLOR.replace('%h', this.hue);
  
              gradient.addColorStop(0, backgroundColor.replace('%l', 30));
              gradient.addColorStop(0.2, backgroundColor.replace('%l', 20));
              gradient.addColorStop(1, backgroundColor.replace('%l', 5));
  
              this.context.fillStyle = gradient;
              this.context.fillRect(0, 0, this.width, this.height);
  
              for (var i = this.snows.length - 1; i >= 0; i--) {
                  if (!this.snows[i].render(this.context)) {
                      this.snows.splice(i, 1);
                  }
              }
              this.hue += this.DELTA_HUE;
              this.hue %= 360;
  
              this.createSnow(this.SNOW_COUNT.DELTA, false);
          }
      };
      var SNOW = function(width, height, center, toRandomize) {
          this.width = width;
          this.height = height;
          this.center = center;
          this.init(toRandomize);
      };
      SNOW.prototype = {
          RADIUS: 20,
          OFFSET: 4,
          INIT_POSITION_MARGIN: 20,
          COLOR: 'rgba(255, 255, 255, 0.8)',
          TOP_RADIUS: {
              MIN: 1,
              MAX: 3
          },
          SCALE: {
              INIT: 0.04,
              DELTA: 0.01
          },
          DELTA_ROTATE: {
              MIN: -Math.PI / 180 / 2,
              MAX: Math.PI / 180 / 2
          },
          THRESHOLD_TRANSPARENCY: 0.7,
          VELOCITY: {
              MIN: -1,
              MAX: 1
          },
          LINE_WIDTH: 2,
          BLUR: 10,
  
          init: function(toRandomize) {
              this.setParameters(toRandomize);
              this.createSnow();
              if (
            navigator.userAgent.match(
              /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            )
          ) {
            var box = document.querySelectorAll('.box')[0];
            box.style.left = '42%';
          }
          },
          setParameters: function(toRandomize) {
              if (!this.canvas) {
                  this.radius = this.RADIUS + this.TOP_RADIUS.MAX * 2 + this.LINE_WIDTH;
                  this.length = this.radius * 2;
                  this.canvas = $('<canvas />').attr({
                      width: this.length,
                      height: this.length
                  }).get(0);
                  this.context = this.canvas.getContext('2d');
              }
              this.topRadius = this.getRandomValue(this.TOP_RADIUS);
  
              var theta = Math.PI * 2 * Math.random();
  
              this.x = this.center.x + this.INIT_POSITION_MARGIN * Math.cos(theta);
              this.y = this.center.y + this.INIT_POSITION_MARGIN * Math.sin(theta);
              this.vx = this.getRandomValue(this.VELOCITY);
              this.vy = this.getRandomValue(this.VELOCITY);
  
              this.deltaRotate = this.getRandomValue(this.DELTA_ROTATE);
              this.scale = this.SCALE.INIT;
              this.deltaScale = 1 + this.SCALE.DELTA * 500 / Math.max(this.width, this.height);
              this.rotate = 0;
  
              if (toRandomize) {
                  for (var i = 0, count = Math.random() * 1000; i < count; i++) {
                      this.x += this.vx;
                      this.y += this.vy;
                      this.scale *= this.deltaScale;
                      this.rotate += this.deltaRotate;
                  }
              }
          },
          getRandomValue: function(range) {
              return range.MIN + (range.MAX - range.MIN) * Math.random();
          },
          createSnow: function() {
              this.context.clearRect(0, 0, this.length, this.length);
  
              this.context.save();
              this.context.beginPath();
              this.context.translate(this.radius, this.radius);
              this.context.strokeStyle = this.COLOR;
              this.context.lineWidth = this.LINE_WIDTH;
              this.context.shadowColor = this.COLOR;
              this.context.shadowBlur = this.BLUR;
  
              var angle60 = Math.PI / 180 * 60,
                  sin60 = Math.sin(angle60),
                  cos60 = Math.cos(angle60),
                  threshold = Math.random() * this.RADIUS / this.OFFSET | 0,
                  rate = 0.5 + Math.random() * 0.5,
                  offsetY = this.OFFSET * Math.random() * 2,
                  offsetCount = this.RADIUS / this.OFFSET;
  
              for (var i = 0; i < 6; i++) {
                  this.context.save();
                  this.context.rotate(angle60 * i);
  
                  for (var j = 0; j <= threshold; j++) {
                      var y = -this.OFFSET * j;
  
                      this.context.moveTo(0, y);
                      this.context.lineTo(y * sin60, y * cos60);
                  }
                  for (var j = threshold; j < offsetCount; j++) {
                      var y = -this.OFFSET * j,
                          x = j * (offsetCount - j + 1) * rate;
  
                      this.context.moveTo(x, y - offsetY);
                      this.context.lineTo(0, y);
                      this.context.lineTo(-x, y - offsetY);
                  }
                  this.context.moveTo(0, 0);
                  this.context.lineTo(0, -this.RADIUS);
                  this.context.arc(0, -this.RADIUS - this.topRadius, this.topRadius, Math.PI / 2, Math.PI * 2.5, false);
                  this.context.restore();
              }
              this.context.stroke();
              this.context.restore();
          },
          render: function(context) {
              context.save();
  
              if (this.scale > this.THRESHOLD_TRANSPARENCY) {
                  context.globalAlpha = Math.max(0, (1 - this.scale) / (1 - this.THRESHOLD_TRANSPARENCY));
  
                  if (this.scale > 1 || this.x < -this.radius || this.x > this.width + this.radius || this.y < -this.radius || this.y > this.height + this.radius) {
                      context.restore();
                      return false;
                  }
              }
              context.translate(this.x, this.y);
              context.rotate(this.rotate);
              context.scale(this.scale, this.scale);
              context.drawImage(this.canvas, -this.radius, -this.radius);
              context.restore();
  
              this.x += this.vx;
              this.y += this.vy;
              this.scale *= this.deltaScale;
              this.rotate += this.deltaRotate;
              return true;
          }
      };
  
      $(function() {
          RENDERER.init();
      });
  </script>
  </body>
</html>

🏠CSS样式代码



@charset "utf-8";
* {
  margin: 0;
  padding: 0;
}
body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
}
li {
  list-style: none;
}
.box {
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: relative;
  /* margin-left: 42%; */
  /* margin-top: 22%; */
  top: -55%;
  left: 47%;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(13deg);
  -webkit-animation: move 5s linear infinite;
}
ransform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {
  -webkit-transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {
  -webkit-transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {
  -webkit-transform: rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1) {
  -webkit-transform: translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(2) {
  -webkit-transform: rotateX(180deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(3) {
  -webkit-transform: rotateX(-90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(4) {
  -webkit-transform: rotateX(90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(5) {
  -webkit-transform: rotateY(-90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(6) {
  -webkit-transform: rotateY(90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
@keyframes move {
  0% {
    -webkit-transform: rotateX(13deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateX(13deg) rotateY(360deg);
  }
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

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

web学生网页设计
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5七夕情人节表白网页(爱情树 Html5实现唯美表白动画代码) HTML+CSS+JavaScript
HTML5学生网页设计作业成品模板
11-11 1万+
HTML5七夕情人节表白网页❤爱情树 Html5实现唯美表白动画代码❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。 ????文章末尾-已经附上源码下载地址 ????作者主页-更多源码 ????七夕情人节告白源码-专栏文章 作品介绍 1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七
情人节程序员用HTML网页表白【烟花代码】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
代码
hellflymm的专栏
03-11 156
常用标签
HBuilder-爱心小动画
nikezhenhaokan的博客
03-03 5962
【代码】HBuilder-爱心小动画。
浪漫爱情树表白代码
05-21
本程序可修改性较强，可在代码里面进行内容修改，如有疑问，可私信
情人节动态爱心表白代码
Patrick_bulong的博客
02-10 488
情人节动态爱心表白代码
html程序员表白前端网页源码
m0_37916936的博客
05-10 7886
这一波主要内容集中在网页这里，我一直想找一个通用或简易办法，能使大部分人都能使用“表白”这份礼物，如果使用网页，那么就要会建站，要服务器，要域名，除了代码还需要配置，有点麻烦，我这里使用的都是阿里云服务器，可以免费建一些网站，操作也比较简单，不会建站的可以来问我。 表白网页1： 演示地址： ...
表白爱心代码，跳动爱心，
Ares_aggs的博客
12-09 2160
【代码】表白爱心代码，跳动爱心，
js实现爱心表白效果，html+css+js源代码，属于程序猿的浪漫之旅
02-17
js实现爱心表白效果，属于程序猿的浪漫之旅 js实现爱心表白效果，属于程序猿的浪漫之旅 js实现爱心表白效果，属于程序猿的浪漫之旅 js实现爱心表白效果，属于程序猿的浪漫之旅 js实现爱心表白效果，属于程序猿的浪漫...
情人节程序员用HTML网页表白【做我女朋友】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
前端程序员表白页面代码
06-20
程序员表白代码，用前端框架写成，专门用于程序员表白，让你的那个她也爱上代码
爱情树的表白网页 html5+css+js
05-19
爱情树的表白网页 可自行修改和编辑
情人节程序员用HTML网页表白【守护爱情(泡泡游戏)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6261
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
利用HBuilder给喜欢的女孩制作专属app(1024程序员节)
但行好事，莫问前程
10-12 6617
1024程序员节快到啦,在此祝愿天下有情人终成眷属,祝所有的IT从业者都能找到自己的男神或女神,从此过上啦幸福的生活
web前端:动态七彩闪烁爱心
SupermarketX的博客
05-18 1282
【代码】web前端:动态七彩闪烁爱心。
HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 1万+
❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)❉ 效果演示❉ 代码文件目录一、文字修改(代码实现)
浪漫的七夕表白简单代码（简单的小代码）
离歌的博客
08-22 3558
是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？无论那种形式，快来秀我们一脸吧！以程序员的方式撒狗粮，专业浪漫，值得拥有！ 浪漫的七夕表白简单代码（简单的小代码）
TypeScript中的函数类型注解：精确定义行为与意图
最新发布
逐星的博客
05-11 404
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
html+css+javascript网页制作案例教程源代码
08-01
以下是一个简单的HTML CSS JavaScript网页制作案例教程的源代码： HTML部分： ``` <!DOCTYPE html> <html> 网页制作案例教程 <link rel="stylesheet" type="text/css" href="style.css"> <h1>HTML CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值