0
点赞
收藏
分享

微信扫一扫

html表白程序源码 html生日快乐网站制作 HTML生日快乐代码 表白程序源码html 程序员表白代码html

westfallon 2022-10-03 阅读 139
html表白程序源码html生日快乐网站制作HTML生日快乐代码表白程序源码html程序员表白代码html编程语言


📂文章目录

  • ​​二、📚网站介绍​​
  • ​​三、🔗网站效果​​
  • ​​▶️1.视频演示​​
  • ​​🧩 2.图片演示​​
  • ​​四、💒 网站代码​​
  • ​​🧱HTML结构代码​​
  • ​​🏠CSS样式代码​​
  • ​​五、🎁更多源码​​

二、📚网站介绍

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

104 贺卡制作蛋糕动画电子生日贺卡模板

🧩 2.图片演示

html表白程序源码 html生日快乐网站制作 HTML生日快乐代码 表白程序源码html 程序员表白代码html_程序员表白代码html

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Dear Friend</title>

  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  <script src="js/shine-text.js"></script>
</head>

<body>
<div class="velas">
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
</div>

<div class="velas-1">
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
</div>

<div class="velas1">
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
</div>

<div class="velas-2">
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
</div>

<div class="velas2">
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
</div>

<div class="velas-3">
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
</div>

<div class="velas3">
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
    <div class="fuego"></div>
</div>



<canvas id="canvas" width=��200�� height=��200��></canvas>

<script>.requestAnimFrame = ( function() {
  return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function( callback ) {
          window.setTimeout( callback, 1000 / 60 );
        };
})();
var canvas = document.getElementById( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    cw = window.innerWidth,
    ch = window.innerHeight,
    fireworks = [],
    particles = [],
    hue = 120,
    limiterTotal = 5,
    limiterTick = 0,
    timerTotal = 80,
    timerTick = 0,
    mousedown = false,
    mx,
    my;
    
canvas.width = cw;
canvas.height = ch;  

function random( min, ) {
  return Math.random() * ( max - min ) + min;
}

function calculateDistance( p1x, p1y, p2x, ) {
  var xDistance = p1x - p2x,
      yDistance = p1y - p2y;
  return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}

function Firework( sx, sy, tx, ) {
  
  this.x = sx;
  this.y = sy;
  
  this.sx = sx;
  this.sy = sy;
  
  this.tx = tx;
  this.ty = ty;
  
  this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
  this.distanceTraveled = 0;
  
  this.coordinates = [];
  this.coordinateCount = 3;
  
  while( this.coordinateCount-- ) {
    this.coordinates.push( [ this.x, this.y ] );
  }
  this.angle = Math.atan2( ty - sy, tx - sx );
  this.speed = 2;
  this.acceleration = 1.05;
  this.brightness = random( 50, 70 );
  
  this.targetRadius = 1;
}


Firework.prototype.update = function( index ) {
  
  this.coordinates.pop();
  
  this.coordinates.unshift( [ this.x, this.y ] );
  
  if( this.targetRadius < 8 ) {
    this.targetRadius += 0.3;
  } else {
    this.targetRadius = 1;
  }
  
  this.speed *= this.acceleration;
  
  var vx = Math.cos( this.angle ) * this.speed,
      vy = Math.sin( this.angle ) * this.speed;
  
  this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
  
  if( this.distanceTraveled >= this.distanceToTarget ) {
    createParticles( this.tx, this.ty );
    fireworks.splice( index, 1 );
  } else {
    this.x += vx;
    this.y += vy;
  }
}

Firework.prototype.draw = function() {
  ctx.beginPath();
  ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
  ctx.lineTo( this.x, this.y );
  ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
  ctx.stroke();
  
  ctx.beginPath();
  ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
  ctx.stroke();
}

function Particle( x, ) {
  this.x = x;
  this.y = y;
  
  this.coordinates = [];
  this.coordinateCount = 5;
  while( this.coordinateCount-- ) {
    this.coordinates.push( [ this.x, this.y ] );
  }
  
  this.angle = random( 0, Math.PI * 2 );
  this.speed = random( 1, 10 );
  
  this.friction = 0.95;
  this.gravity = 1;
  
  this.hue = random( hue - 20, hue + 20 );
  this.brightness = random( 50, 80 );
  this.alpha = 1;
  this.decay = random( 0.015, 0.03 );
}

Particle.prototype.update = function( index ) {
  
  this.coordinates.pop();
  this.coordinates.unshift( [ this.x, this.y ] );
  this.speed *= this.friction;
  this.x += Math.cos( this.angle ) * this.speed;
  this.y += Math.sin( this.angle ) * this.speed + this.gravity;
  this.alpha -= this.decay;
  
  if( this.alpha <= this.decay ) {
    particles.splice( index, 1 );
  }
}

Particle.prototype.draw = function() {
  ctx. beginPath();
  ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
  ctx.lineTo( this.x, this.y );
  ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
  ctx.stroke();
}

function createParticles( x, ) {
  var particleCount = 30;
  while( particleCount-- ) {
    particles.push( new Particle( x, y ) );
  }
}


function loop() {
  requestAnimFrame( loop );
  
  hue += 0.5;
  
  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
  ctx.fillRect( 0, 0, cw, ch );
  ctx.globalCompositeOperation = 'lighter';
  
  var i = fireworks.length;
  while( i-- ) {
    fireworks[ i ].draw();
    fireworks[ i ].update( i );
  }
  
  var i = particles.length;
  while( i-- ) {
    particles[ i ].draw();
    particles[ i ].update( i );
  }
  
  if( timerTick >= timerTotal ) {
    if( !mousedown ) {
      fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
      timerTick = 0;
    }
  } else {
    timerTick++;
  }
  
  if( limiterTick >= limiterTotal ) {
    if( mousedown ) {
      fireworks.push( new Firework( cw / 2, ch, mx, my ) );
      limiterTick = 0;
    }
  } else {
    limiterTick++;
  }
}

canvas.addEventListener( 'mousemove', function( e ) {
  mx = e.pageX - canvas.offsetLeft;
  my = e.pageY - canvas.offsetTop;
});

canvas.addEventListener( 'mousedown', function( e ) {
  e.preventDefault();
  mousedown = true;
});

canvas.addEventListener( 'mouseup', function( e ) {
  e.preventDefault();
  mousedown = false;
});

window.onload = loop;</script>

<audio autoplay="autoplay" loop="loop" preload="auto" src="http://www.17sucai.com/preview/3630/2013-06-27/ruguomeiyouni.mp3" type="audio/wav"></audio>

</body>
</html>

🏠CSS样式代码

.velas-1:after,
.velas-1:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-1:after {
  top: 25%;
  left: 0;
}

.velas-1:before {
  top: 45%;
  left: 0;
}

.velas1:after,
.velas1:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas1:after {
  top: 25%;
  left: 0;
}

.velas1:before {
  top: 45%;
  left: 0;
}

.velas-2:after,
.velas-2:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-2:after {
  top: 25%;
  left: 0;
}

.velas-2:before {
  top: 45%;
  left: 0;
}

.velas2:after,
.velas2:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas2:after {
  top: 25%;
  left: 0;
}

.velas2:before {
  top: 45%;
  left: 0;
}

.velas-3:after,
.velas-3:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-3:after {
  top: 25%;
  left: 0;
}

.velas-3:before {
  top: 45%;
  left: 0;
}

.velas3:after,
.velas3:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas3:after {
  top: 25%;
  left: 0;
}

.velas3:before {
  top: 45%;
  left: 0;
}

.velas-4:after,
.velas-4:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-4:after {
  top: 25%;
  left: 0;
}

.velas-4:before {
  top: 45%;
  left: 0;
}

.velas4:after,
.velas4:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas4:after {
  top: 25%;
  left: 0;
}

.velas4:before {
  top: 45%;
  left: 0;
}

.velas-5:after,
.velas-5:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-5:after {
  top: 25%;
  left: 0;
}

.velas-5:before {
  top: 45%;
  left: 0;
}

.velas5:after,
.velas5:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas5:after {
  top: 25%;
  left: 0;
}

.velas5:before {
  top: 45%;
  left: 0;
}

.fuego {
  border-radius: 100%;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -2.2px;
  width: 6.66666667px;
  height: 18px;
}

.fuego:nth-child(1) {
  -webkit-animation: fuego 2s 6.5s infinite;
  animation: fuego 2s 6.5s infinite;
}

.fuego:nth-child(2) {
  -webkit-animation: fuego 1.5s 6.5s infinite;
  animation: fuego 1.5s 6.5s infinite;
}

.fuego:nth-child(3) {
  -webkit-animation: fuego 1s 6.5s infinite;
  animation: fuego 1s 6.5s infinite;
}

.fuego:nth-child(4) {
  -webkit-animation: fuego 0.5s 6.5s infinite;
  animation: fuego 0.5s 6.5s infinite;
}

.fuego:nth-child(5) {
  -webkit-animation: fuego 0.2s 6.5s infinite;
  animation: fuego 0.2s 6.5s infinite;
}

@-webkit-keyframes {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }

  50% {
    background: rgba(255, 50, 0, 0.1);
    -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(-20px) scale(0);
    transform: translateY(-20px) scale(0);
  }
}

@keyframes {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }

  50% {
    background: rgba(255, 50, 0, 0.1);
    -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(-20px) scale(0);
    transform: translateY(-20px) scale(0);
  }
}

@-webkit-keyframes {
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes {
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}


举报

相关推荐

HTML生日快乐代码 html生日快乐网站制作 html烟花表白网站制作

html前端javascript七夕情人节表白网页代码程序员专属情人节表白网站编程语言

html生日祝福网站 html生日快乐网页代码 程序员专属情人节表白网站

html前端javascript生日祝福网页htmlhtml生日快乐网站制作Windows系统/运维

最新520表白网站制作HTML前端超好看 (HTML生日快乐代码)

javascriptcsshtml网页设计dreamweaver系统/运维

超炫酷生日快乐网页源代码_最炫表白网站源码_html生日快乐网站制作

html前端javascript七夕情人节表白网页代码程序员专属情人节表白网站系统/运维

温馨浪漫HTML表白爱情源码大气简洁单页源码(html生日快乐网站制作)

学生网页期末作业web前端网页设计html静态网页html系统/运维

HTML生日快乐代码

前端小程序

HTML+CSS+JavaScript实现满屏爱心特效 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML 七夕情人节表白页面制作HTML 生日快乐源码HTML

七夕情人节520情人节520情人节表白源码HTML七夕情人节表白源码HTML生日祝福代码HTMLHtml/CSS前端开发

生日快乐网页html

4shtml5eHTML5移动开发

HTML+CSS+JavaScript实现满屏爱心特效 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML 七夕情人节表白页面制作HTML 生日快乐源码HTML...

csshtmljavascriptjshtml5Html/CSS前端开发

情人节程序员用HTML网页表白【生日快乐动画】HTML+CSS+JavaScript HTML5七夕情人节表白网页源码

htmlcss3cHTML5移动开发
0 条评论