HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码

最新推荐文章于 2023-07-19 16:46:28 发布

@秋天的笔记

最新推荐文章于 2023-07-19 16:46:28 发布

阅读量2.3k

点赞数 9

分类专栏： 520情人节告白网页制作七夕情人节表白网页源代码生日祝福网页html 文章标签： HTML5七夕情人节动画网页 HTML5七夕情人节表白 HTML生日快乐代码

本文链接：https://blog.csdn.net/m0_46166683/article/details/121396152

版权

520情人节告白网页制作同时被 3 个专栏收录

50 篇文章 9 订阅

订阅专栏

七夕情人节表白网页源代码

50 篇文章 45 订阅

订阅专栏

生日祝福网页html

49 篇文章 12 订阅

订阅专栏

HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡100款七夕情人节告白源码-专栏文章

作品介绍

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

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。

文章目录

HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、学习资料
五、源码下载
六、更多源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<!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;
        }
    </style>
  </head>
  <body>
    <audio autoplay="autopaly">
      <source src="sjzmd.mp3" type="audio/mp3" />
    </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.rotate += this.deltaRotate;
              return true;
          }
      };
  
      $(function() {
          RENDERER.init();
      });
  </script>
  </body>
</html>

四、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

五、源码下载

【百度网盘-完整源码下载地址↓】

链接：点我下载源码 https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888

六、更多源码

❤100款表白网页演示地址

❤100款表白网页在线视频演示

@秋天的笔记

关注

9
点赞
踩
37

收藏

觉得还不错? 一键收藏
2
评论
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码

HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。????文章末尾-已经附上源码下载地址????作者主页-更多源码????100款七夕情人节告白源码-专栏文章作
复制链接

扫一扫