编程知识 cdmana.com

Send girlfriend HTML + CSS + JS for Christmas

Help programmers get their girls html+css+js Fireworks show ( Including music ) You can edit text by yourself

Christmas is coming , Do you want to surprise your girlfriend or your sister ? html+css+js Write the tiktok effect of fireworks , Cool and charming , Help programmers get their girls , everything is going smoothly , I wish you all have lovers and get married , Enduring as the universe .. I quickly learned , Let's make the romance that belongs to our programmers !

Web Front-end based Canvas The realization of fireworks express effect , Based on the Canvas Understanding of the realization of , There will always be a little surprise , Can be amazing to each other's short time .

 It's not easy to make , Need source code friend   add to qq 365392777

For more ways to express yourself, please click the link below :

Girlfriend's birthday HTML+css3+js Realize the cool cherry blossom of shaking sound 3D Photo album ( With background music ) A programmer must declare himself


Dynamic renderings ( Compatible H5 Mobile and pc End )

Online demo address

 Insert picture description here
 Insert picture description here

 Insert picture description here
 Insert picture description here
 Insert picture description here

People don't talk too much , Go straight to the code

File structure

 Insert picture description here

html part


<!--
 * @Author: xf
 * @Date: 2020-12-21 09:07:44
 * @LastEditTime: 2020-12-21 17:27:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \firework-master\ Brilliant fireworks \fire.html
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style>
        body{
    
     margin:0;padding:0;overflow: hidden;} .city{
    
     width:100%;position:fixed;bottom:
                0px;z-index: 100;} .city img{
    
     width: 100%;}
        audio{
    
     
            opacity: 0;
        }
    </style>
    <title>
         Cool fireworks show 
    </title>
    <!--  Pop up style  -->
    <link href="modal.css" rel="stylesheet"/>

    <style type="text/css">
        html,
        body {
    
     
            background-color: black;
            overflow: hidden;
            user-select: none;
            margin: 0;
        }
    </style>
</head>
<body onselectstart="return false">
    <div class="star comet"></div>
    <script src="js/index.js"></script>
  
<!-- Dialogue section -->
<div class="share_img"><img src="img/xin.png" alt=""></div>

<div class="page_one">
    <div class="content">
        <div class="text_wrapper">
            <img class="xin" src="img/xin.png" alt="" />
            <div class="text">
                 Cute girl , I love you , Would you like to be my girlfriend? ?
            </div>
        </div>
    </div>
    <div class="btn-groups">
        <div class="heart-btn">
            <div id="yes" class="btn btn-a"><span> willing </span></div>
        </div>
        <div id="no" class="btn btn-b"><span> Unwilling </span></div>
    </div>
</div>
<!-- Fireworks -->
<canvas id='cas' style="background-color:rgba(0,5,24,1); z-index: 9999;">
     Browser does not support canvas
</canvas>
<div class="city">
    <img src="img/city.png" alt="" />
</div>
<img src="img/moon.png" alt="" id="moon" style="visibility: hidden;" />
<div style="display:none">
    <div class="shape">
        520
    </div>
    <div class="shape">
        Custom text here 
    </div>
    <div class="shape">
         A big crowd 
    </div>
    <div class="shape">
         Meeting is fate 
    </div>
    <div class="shape">
         I love you forever 
    </div>
</div>
<!-- The music part -->
<audio autoplay loop id="music">
    <source src="mp3/music.mp3" />
</audio>
<iframe  id="iframMusic" allow="autoplay" style="display:none" src="mp3/blank.mp3"></iframe>
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>
...  It's not easy to make , Need source code friend   Please add  365392777
</html>

css part

* {
   
    
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.share_img {
   
    
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.content {
   
    
  /* padding: 80px 20px; */
}
.text_wrapper {
   
    
  display: -webkit-box;
  display: flex;
}
.text_wrapper .text {
   
    
  padding-top: 20px;
  padding-left: 20px;
}
.hide {
   
    
  display: none !important;
}
p {
   
    
  margin: 0;
}
.btn-groups {
   
    
  padding-right: 20px;
  text-align: center;
}
.heart-btn {
   
    
  display: inline-block;
  animation: breath 0.8s linear 0s infinite both;
  -webkit-animation: breath 0.8s linear 0s infinite both;
}
.btn {
   
    
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 0 30px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.btn span {
   
    
  display: block;
  width: 100%;
  height: 100%;
  line-height: 60px;
  margin-top: -10px;
  margin-left: -10px;
  text-align: center;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/*  willing  */
.btn-a {
   
    
  background: pink;
}
.btn-b {
   
    
  background: #c9c9c9;
}
.btn-b:after {
   
    
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 30px;
  background: #c9c9c9;
  left: 0;
  top: -29px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
}
.container {
   
    
}
.container .mask {
   
    
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}
.container .modal {
   
    
  width: 50%;
  height: 160px;
  position: absolute;
  top: 55%;
  left: 50%;
  padding: 20px 15px;
  border-radius: 5px;
  /* transform: translate(-50%, -70%); */
  -webkit-transform: translate(-50%, -0%);
  -webkit-transform: translate(-50%, -0%);
  background: #f3f3f3;
}
.container .modal p {
   
    
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #353535;
  text-align: center;
}
.type_words {
   
    
  padding: 12px 20px;
}
.page_one {
   
    
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90%);
}
.text {
   
    
  color: pink;
  font-size: 16px;
}

.xin {
   
    
  width: 20%;
}
...  It's not easy to make , Need source code friend   Please add  365392777

js part

var canvas = document.getElementById("cas");
var ocas = document.createElement("canvas");
var octx = ocas.getContext("2d");
var ctx = canvas.getContext("2d");
ocas.width = canvas.width = window.innerWidth;
ocas.height = canvas.height = window.innerHeight;
var bigbooms = [];

// window.onload = function() {
   
    
//     initAnimate();
// };

document.getElementById("iframMusic").onload = function(){
   
    
    var music = document.getElementById("music");
    music.src = 'music.mp3';
    music.oncanplay = function(){
   
    
        music.play();
    };
};

function initAnimate() {
   
    
    drawBg();
    lastTime = new Date();
    animate()
}
var lastTime;

function drawMoon() {
   
    
    var moon = document.getElementById("moon");
    var centerX = canvas.width - 200,
        centerY = 100,
        width = 80;
    if (moon.complete) {
   
    
        ctx.drawImage(moon, centerX, centerY, width, width)
    } else {
   
    
        moon.onload = function() {
   
    
            ctx.drawImage(moon, centerX, centerY, width, width)
        }
    }
    var index = 0;
    for (var i = 0; i < 10; i++) {
   
    
        ctx.save();
        ctx.beginPath();
        ctx.arc(centerX + width / 2, centerY + width / 2, width / 2 + index, 0, 2 * Math.PI);
        ctx.fillStyle = "rgba(240,219,120,0.005)";
        index += 2;
        ctx.fill();
        ctx.restore()
    }
}
Array.prototype.foreach = function(callback) {
   
    
    for (var i = 0; i < this.length; i++) {
   
    
        if (this[i] !== null) {
   
    
            callback.apply(this[i], [i])
        }
    }
};
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
   
    
        window.setTimeout(callback, 1000 / 60)
    };
canvas.onclick = function() {
   
    
    var x = event.clientX;
    var y = event.clientY;
    var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {
   
    
        x: x,
        y: y
    });
    bigbooms.push(bigboom)
};
var Boom = function(x, r, c, boomArea, shape) {
   
    
    this.booms = [];
    this.x = x;
    this.y = (canvas.height + r);
    this.r = r;
    this.c = c;
    this.shape = shape || false;
    this.boomArea = boomArea;
    this.theta = 0;
    this.dead = false;
    this.ba = parseInt(getRandom(80, 200))
};
Boom.prototype = {
   
    
    _paint: function() {
   
    
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        ctx.fillStyle = this.c;
        ctx.fill();
        ctx.restore()
    },
    _move: function() {
   
    
        var dx = this.boomArea.x - this.x,
            dy = this.boomArea.y - this.y;
        this.x = this.x + dx * 0.01;
        this.y = this.y + dy * 0.01;
        if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
   
    
            if (this.shape) {
   
    
                this._shapBoom()
            } else {
   
    
                this._boom()
            }
            this.dead = true
        } else {
   
    
            this._paint()
        }
    },
    _drawLight: function() {
   
    
        ctx.save();
        ctx.fillStyle = "rgba(255,228,150,0.3)";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);
        ctx.fill();
        ctx.restore()
    },
    _boom: function() {
   
    
        var fragNum = getRandom(30, 200);
        var style = getRandom(0, 10) >= 5 ? 1 : 2;
        var color;
        if (style === 1) {
   
    
            color = {
   
    
                a: parseInt(getRandom(128, 255)),
                b: parseInt(getRandom(128, 255)),
                c: parseInt(getRandom(128, 255))
            }
        }
Frag.prototype = {
   
    
    paint: function() {
   
    
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.fillStyle = "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)";
        ctx.fill();
        ctx.restore()
    },
    moveTo: function(index) {
   
    
        this.ty = this.ty + 0.3;
        var dx = this.tx - this.x,
            dy = this.ty - this.y;
        this.x = Math.abs(dx) < 0.1 ? this.tx: (this.x + dx * 0.1);
        this.y = Math.abs(dy) < 0.1 ? this.ty: (this.y + dy * 0.1);
        if (dx === 0 && Math.abs(dy) <= 80) {
   
    
            this.dead = true
        }
        this.paint()
    }
};
...  It's not easy to make , Need source code friend   Please add  365392777

More source code

1.echart Online demo address

2. be based on Echarts Realize the source code of visual data large screen response display effect , total 100 set , It can be redeveloped on this basis (vue/react) You can use

3. Girlfriend's birthday HTML+css3+js Realize the cool cherry blossom of shaking sound 3D Photo album ( With background music ) A programmer must declare himself

4.[ Deploy online tools for free ]-> You don't need a server to deploy the project online

5. front end html+css+js[1000 It's a cool special effect ] When I learned that , All the cool special effects pages ( Including source code ) You can download it !

6. Tiktok clock ( Free with source code )

Ten thousand years is too long , together with you , seize every minute .
A love letter for you , A love word for you , For the rest of your life .
The future I want , It's getting up every morning , I can see you and the sunshine .

版权声明
本文为[osc_ p4wgjz7p]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225094529781x.html

Scroll to Top