HTML5浪漫生日祝福电子贺卡网页模板(HTML5+CSS3+JS)_520表白/七夕情人节表白/告白网页制作/生日快乐html模板

html+css+js实现生日快乐代码🎂超炫酷效果🎂(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码

程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板
HTML生日快乐祝福网页模板,该模板有多种动态效果图,全局采用蓝色装饰,适用于给女朋友的生日祝福,只需简单修改,即可用网页生成打开。html+css+js实现生日快乐代码🎂超炫酷效果🎂(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码

戳下方链接↓查看线上演示地址

1.生日快乐🎂(多页面html模板)★在线演示地址:https://ruanjiafeng2013.gitee.io/happy-birthday-template

2.生日蛋糕🎂★在线演示地址:https://ruanjiafeng2013.gitee.io/birthday-cake

3.(生日快乐)蛋糕烟花+蓝色梦幻海洋3D相册🎂★在线演示地址: https://ruanjiafeng2013.gitee.io/birthday-cake520/

动态效果演示

在这里插入图片描述

HTML5庆祝生日蛋糕烟花特效

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>制作一个程序员的生日快乐代码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style11.css">
    <link rel="stylesheet" href="css/yanhua.css">
    <link rel="stylesheet" href="css/style2D.css">
</head>

<body>
    <marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday!           生日快乐!</marquee>
    <marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3">祝你生日快乐,天天开心!</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
    <main style="text-align:center;position:absolute;">

        <ul class="star" style="--v: 1; --t: 1;">
            <li style="--i: 0"></li>
        </ul>
        <ul style="--v: 2; --t: 8; --direction:reverse">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
        </ul>
        <ul style="--v: 3; --t: 12">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
        </ul>
        <ul style="--v: 4; --t: 18; --direction:reverse">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
            <li style="--i: 12"></li>
            <li style="--i: 13"></li>
            <li style="--i: 14"></li>
            <li style="--i: 15"></li>
            <li style="--i: 16"></li>
            <li style="--i: 17"></li>
        </ul>

        </ul>
        <p id="message" style="position:relative;margin-top:-40px;z-index:99999">
            <img src="img/birthday.png" alt="Alternate Text" />
            <br />
        </p>
    </main> 
    <div class="block-audio" style="z-index:10000;">
    </div>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/index1.js"></script>
    <script src="js/script.js"></script>

</body>


</html>

js代码

console.clear();

/* Play with these values! */
const PARTICLE_COUNT = 100;
const SAFE_DISTANCE = 130;
const INFECTED_DISTANCE = 15;
const INFECTION_RATE = 0.25;
const RECOVERY_TIME = 14000;
const STAY_AT_HOME = 0.1;

/* ---------------------------------- */

let particles = [];

const STATUSES = {
  HEALTHY: "HEALTHY",
  INFECTED: "INFECTED",
  RECOVERED: "RECOVERED"
};

const elBody = document.body;
const elCanvas = document.querySelector("#canvas");
const ctx = elCanvas.getContext("2d");

let width, height;

function resize() {
  width = elCanvas.width = elBody.clientWidth;
  height = elCanvas.height = elBody.clientHeight;
}
resize();
window.addEventListener("resize", resize);

/* ---------------------------------- */

class Particle {
  constructor() {
    this.x = Math.random() * width;
    this.y = Math.random() * height;
    this.radius = 3;
    this.color = "white";
    this.speed = Math.random() < STAY_AT_HOME ? 0 : 1;
    this.directionAngle = Math.floor(Math.random() * 360);
    this.vector = {
      x: Math.cos(this.directionAngle) * this.speed,
      y: Math.sin(this.directionAngle) * this.speed
    };
    this.status = STATUSES.HEALTHY;

    if (Math.random() < INFECTION_RATE) {
      this.infect();
    }
  }
  infect() {
    if (
      this.status === STATUSES.INFECTED ||
      this.status === STATUSES.RECOVERED
    ) {
      return;
    }

    this.color = "green";
    this.status = STATUSES.INFECTED;

    setTimeout(() => {
      this.recover();
    }, RECOVERY_TIME);
  }
  recover() {
    this.status = STATUSES.RECOVERED;
    this.color = "hotpink";
  }
  draw(drawCtx) {
    drawCtx.beginPath();
    drawCtx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    drawCtx.closePath();
    drawCtx.fillStyle = this.color;
    drawCtx.fill();
  }
  update() {
    this.checkBoundaries();
    this.x += this.vector.x;
    this.y += this.vector.y;
  }
  checkBoundaries() {
    if (this.x > width || this.x < 0) {
      this.vector.x *= -1;
      /* Ensure the dots are pushed inside */
      this.x = Math.max(0, Math.min(width, this.x));
    }
    if (this.y > height || this.y < 0) {
      this.vector.y *= -1;
      /* Ensure the dots are pushed inside */
      this.y = Math.max(0, Math.min(height, this.y));
    }
  }
}

/* ---------------------------------- */

function distance(x1, y1, x2, y2) {
  var dx = x1 - x2;
  var dy = y1 - y2;
  return Math.sqrt(dx * dx + dy * dy);
}

function linkParticles(particle, otherParticles, drawCtx) {
  for (const p of otherParticles) {
    const d = distance(particle.x, particle.y, p.x, p.y);

    if (d > SAFE_DISTANCE) {
      continue;
    }

    // Infect other particle!
    if (particle.status === STATUSES.INFECTED && d < INFECTED_DISTANCE) {
      p.infect();
    }

    const opacity = 0.8 - (d / SAFE_DISTANCE) * 0.8;
    drawCtx.lineWidth = 1;
    drawCtx.strokeStyle = particle.color; //rgba(255,255,255,${opacity})`;
    drawCtx.globalAlpha = opacity;
    drawCtx.beginPath();
    drawCtx.moveTo(particle.x, particle.y);
    drawCtx.lineTo(p.x, p.y);
    drawCtx.closePath();
    drawCtx.stroke();
    drawCtx.globalAlpha = 1;
  }
}



做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

1.1部署流程

在这里插入图片描述

1.2 哇~ 部署成功

哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~

在这里插入图片描述


前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~
在这里插入图片描述


源码获取

~ 关注我,点赞博文~ 每天带你涨知识!

1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

在这里插入图片描述


更多表白源码

❤100款表白源码演示地址

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论 22

打赏作者

@码出未来-web网页设计

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值