current position:Home>HTML5 romantic birthday greeting e-card web page template (HTML5 + CSS3 + JS)_ 520 confession / Tanabata Valentine's Day confession / advertisement Web page making / happy birthday HTML template

HTML5 romantic birthday greeting e-card web page template (HTML5 + CSS3 + JS)_ 520 confession / Tanabata Valentine's Day confession / advertisement Web page making / happy birthday HTML template

2021-08-22 22:58:00 @. code out the future

html+css+js Happy birthday code, super cool effect ( Including birthday background music )520/ Confession / Valentine's day on Chinese Valentine's day / Proposal dedicated cool animation web page source code

Programmer love 520/ Confession / Valentine's day on Chinese Valentine's day / Proposal only html5+css3+js Happy birthday website template
HTML Happy birthday blessing web page template , The template has a variety of dynamic renderings , The whole is decorated in blue , For birthday wishes to your girlfriend , Simple modification , That is, you can use web page generation to open .html+css+js Happy birthday code, super cool effect ( Including birthday background music )520/ Confession / Valentine's day on Chinese Valentine's day / Proposal dedicated cool animation web page source code

Link below ↓ View the online presentation address

1. Happy birthday, ( Multi page html Templates )* Online demo address :https://ruanjiafeng2013.gitee.io/happy-birthday-template

2. Birthday cake * Online demo address :https://ruanjiafeng2013.gitee.io/birthday-cake

3.( Happy birthday, ) Cake fireworks + Blue dream ocean 3D Photo album * Online demo address : https://ruanjiafeng2013.gitee.io/birthday-cake520/

Dynamic effect demonstration

 Insert picture description here

HTML5 Birthday cake fireworks

 Insert picture description here

html Code

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

<head>
    <meta charset="UTF-8">
    <title> Make a programmer's happy birthday code </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!            Happy birthday, !</marquee>
    <marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3"> happy birthday to you , Happy everyday !</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5"> happy birthday to you , No worries !</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5"> happy birthday to you , No worries !</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5"> happy birthday to you , No worries !</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5"> happy birthday to you , No worries !</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5"> happy birthday to you , No worries !</marquee>
    <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5"> happy birthday to you , No worries !</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 Code

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;
  }
}



Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( Use for free forever )

1. You don't need to buy a server to deploy online , Your connection is accessible all over the world , Here is a necessary artifact for programmers ~
Plugins are integrated with super easy-to-use plug-ins , Download and install for free , Simple and easy to understand , It's an artifact ~ If necessary, it can be found in the article ↓ Xiagong Z Number acquisition

2. Is to do your code effect well , Deploy online , Send links to others , You can let the other party click in through your connection , You can see the effect of your web page , Both computer and mobile terminals are OK ! ( Otherwise, people will send files when they see your web page , The experience is not very good ~)

1.1 Deployment process

 Insert picture description here

1.2 wow ~ Deployment success

wow ~ Deployment success ! Deploy your written page online , People all over the world can access your web page through links ( Free forever )~

 Insert picture description here


front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~
 Insert picture description here


* The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

* 3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here


* More confession source code

100 Paragraph confession source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225758476q.html

Random recommended