这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
三、精彩专栏

一、网页介绍

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

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

二、代码展示

1.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">
<head>
<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>魔幻粒子表白网页</title><link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/></head>
<body>
<canvas class="canvas"></canvas>
<div class="help" style="display:none;">?</div>
<div class="ui" style="display:none;">
<input class="ui-input" type="text"/>
<span class="ui-return">↵</span>
</div>
<div class="overlay">
<div class="tabs">
<div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>
<div class="tabs-panels">
<ul class="tabs-panel commands">
<li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>
<li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
</ul>
</div>
</div>
</div><script type="text/javascript">
var S={init:function(){var action=window.location.href,i=action.indexOf('?a=');S.Drawing.init('.canvas');document.body.classList.add('body--ready');if(i!==-1){S.UI.simulate(decodeURI(action).substring(i+ 3));}else{S.UI.simulate('#circle|亲爱的|老婆大人|你即将成为|全世界|最幸福|的妻子。：|#countdown 5|#show',3000);}
<!--文字在上面。：-->
S.Drawing.loop(function(){S.Shape.render();});}}
<!--跳转链接再下面http://www.wigcw.cn/。-->
function show(){window.location.href="http://www.wigcw.cn/";};S.Drawing=(function(){var canvas,context,renderFn
requestFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};return{init:function(el){canvas=document.querySelector(el);context=canvas.getContext('2d');this.adjustCanvas();window.addEventListener('resize',function(e){S.Drawing.adjustCanvas();});},loop:function(fn){renderFn=!renderFn?fn:renderFn;this.clearFrame();renderFn();requestFrame.call(window,this.loop.bind(this));},adjustCanvas:function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;},clearFrame:function(){context.clearRect(0,0,canvas.width,canvas.height);},getArea:function(){return{w:canvas.width,h:canvas.height};},drawCircle:function(p,c){context.fillStyle=c.render();context.beginPath();context.arc(p.x,p.y,p.z,0,2*Math.PI,true);context.closePath();context.fill();}}}());S.UI=(function(){var input=document.querySelector('.ui-input'),ui=document.querySelector('.ui'),help=document.querySelector('.help'),commands=document.querySelector('.commands'),overlay=document.querySelector('.overlay'),canvas=document.querySelector('.canvas'),interval,isTouch=false,currentAction,resizeTimer,time,maxShapeSize=30,firstAction=true,sequence=[],cmd='#';function formatTime(date){var h=date.getHours(),m=date.getMinutes(),m=m<10?'0'+ m:m;return h+':'+ m;}
function getValue(value){return value&&value.split(' ')[1];}
function getAction(value){value=value&&value.split(' ')[0];return value&&value[0]===cmd&&value.substring(1);}
function timedAction(fn,delay,max,reverse){clearInterval(interval);currentAction=reverse?max:1;fn(currentAction);if(!max||(!reverse&&currentAction<max)||(reverse&&currentAction>0)){interval=setInterval(function(){currentAction=reverse?currentAction- 1:currentAction+ 1;fn(currentAction);if((!reverse&&max&&currentAction===max)||(reverse&&currentAction===0)){clearInterval(interval);}},delay);}}
function reset(destroy){clearInterval(interval);sequence=[];time=null;destroy&&S.Shape.switchShape(S.ShapeBuilder.letter(''));}
function performAction(value,tsp){var action,value,current;overlay.classList.remove('overlay--visible');sequence=typeof(value)==='object'?value:sequence.concat(value.split('|'));input.value='';checkInputWidth();timedAction(function(index){current=sequence.shift();action=getAction(current);value=getValue(current);switch(action){case'countdown':value=parseInt(value)||10;value=value>0?value:10;timedAction(function(index){if(index===0){if(sequence.length===0){S.Shape.switchShape(S.ShapeBuilder.letter(''));}else{performAction(sequence);}}else{S.Shape.switchShape(S.ShapeBuilder.letter(index),true);}},1000,value,true);break;case'rectangle':value=value&&value.split('x');value=(value&&value.length===2)?value:[maxShapeSize,maxShapeSize/2];S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize,parseInt(value[0])),Math.min(maxShapeSize,parseInt(value[1]))));break;case'circle':value=parseInt(value)||maxShapeSize;value=Math.min(value,maxShapeSize);S.Shape.switchShape(S.ShapeBuilder.circle(value));break;case'time':var t=formatTime(new Date());if(sequence.length>0){S.Shape.switchShape(S.ShapeBuilder.letter(t));}else{timedAction(function(){t=formatTime(new Date());if(t!==time){time=t;S.Shape.switchShape(S.ShapeBuilder.letter(time));}},1000);}
break;case'show':show();break;default:S.Shape.switchShape(S.ShapeBuilder.letter(current[0]===cmd?'What?':current));}},tsp,sequence.length);}
function checkInputWidth(e){if(input.value.length>18){ui.classList.add('ui--wide');}else{ui.classList.remove('ui--wide');}
if(firstAction&&input.value.length>0){ui.classList.add('ui--enter');}else{ui.classList.remove('ui--enter');}}
function bindEvents(){document.body.addEventListener('keydown',function(e){input.focus();if(e.keyCode===13){firstAction=false;reset();performAction(input.value,3000);}});input.addEventListener('input',checkInputWidth);input.addEventListener('change',checkInputWidth);input.addEventListener('focus',checkInputWidth);help.addEventListener('click',function(e){overlay.classList.toggle('overlay--visible');overlay.classList.contains('overlay--visible')&&reset(true);});commands.addEventListener('click',function(e){var el,info,demo,tab,active,url;if(e.target.classList.contains('commands-item')){el=e.target;}else{el=e.target.parentNode.classList.contains('commands-item')?e.target.parentNode:e.target.parentNode.parentNode;}
info=el&&el.querySelector('.commands-item-info');demo=el&&info.getAttribute('data-demo');url=el&&info.getAttribute('data-url');if(info){overlay.classList.remove('overlay--visible');if(demo){input.value=demo;if(isTouch){reset();performAction(input.value,3000);}else{input.focus();}}else if(url){}}});canvas.addEventListener('click',function(e){overlay.classList.remove('overlay--visible');});}
function init(){bindEvents();input.focus();isTouch&&document.body.classList.add('touch');}
init();return{simulate:function(action,tsp){performAction(action,tsp);}}}());S.UI.Tabs=(function(){var tabs=document.querySelector('.tabs'),labels=document.querySelector('.tabs-labels'),triggers=document.querySelectorAll('.tabs-label'),panels=document.querySelectorAll('.tabs-panel');function activate(i){triggers[i].classList.add('tabs-label--active');panels[i].classList.add('tabs-panel--active');}
function bindEvents(){labels.addEventListener('click',function(e){var el=e.target,index;if(el.classList.contains('tabs-label')){for(var t=0;t<triggers.length;t++){triggers[t].classList.remove('tabs-label--active');panels[t].classList.remove('tabs-panel--active');if(el===triggers[t]){index=t;}}
activate(index);}});}
function init(){activate(0);bindEvents();}
init();}());S.Point=function(args){this.x=args.x;this.y=args.y;this.z=args.z;this.a=args.a;this.h=args.h;};S.Color=function(r,g,b,a){this.r=r;this.g=g;this.b=b;this.a=a;};S.Color.prototype={render:function(){return'rgba('+ this.r+','+ +this.g+','+ this.b+','+ this.a+')';}};S.Dot=function(x,y){this.p=new S.Point({x:x,y:y,z:5,a:1,h:0});this.e=0.07;this.s=true;this.c=new S.Color(255,255,255,this.p.a);this.t=this.clone();this.q=[];};S.Dot.prototype={clone:function(){return new S.Point({x:this.x,y:this.y,z:this.z,a:this.a,h:this.h});},_draw:function(){this.c.a=this.p.a;S.Drawing.drawCircle(this.p,this.c);},_moveTowards:function(n){var details=this.distanceTo(n,true),dx=details[0],dy=details[1],d=details[2],e=this.e*d;if(this.p.h===-1){this.p.x=n.x;this.p.y=n.y;return true;}
if(d>1){this.p.x-=((dx/d)*e);this.p.y-=((dy/d)*e);}else{if(this.p.h>0){this.p.h--;}else{return true;}}
return false;},_update:function(){if(this._moveTowards(this.t)){var p=this.q.shift();if(p){this.t.x=p.x||this.p.x;this.t.y=p.y||this.p.y;this.t.z=p.z||this.p.z;this.t.a=p.a||this.p.a;this.p.h=p.h||0;}else{if(this.s){this.p.x-=Math.sin(Math.random()*3.142);this.p.y-=Math.sin(Math.random()*3.142);}else{this.move(new S.Point({x:this.p.x+(Math.random()*50)- 25,y:this.p.y+(Math.random()*50)- 25,}));}}}
d=this.p.a- this.t.a;this.p.a=Math.max(0.1,this.p.a-(d*0.05));d=this.p.z- this.t.z;this.p.z=Math.max(1,this.p.z-(d*0.05));},distanceTo:function(n,details){var dx=this.p.x- n.x,dy=this.p.y- n.y,d=Math.sqrt(dx*dx+ dy*dy);return details?[dx,dy,d]:d;},move:function(p,avoidStatic){if(!avoidStatic||(avoidStatic&&this.distanceTo(p)>1)){this.q.push(p);}},render:function(){this._update();this._draw();}}
S.ShapeBuilder=(function(){var gap=13,shapeCanvas=document.createElement('canvas'),shapeContext=shapeCanvas.getContext('2d'),fontSize=500,fontFamily='Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';function fit(){shapeCanvas.width=Math.floor(window.innerWidth/gap)*gap;shapeCanvas.height=Math.floor(window.innerHeight/gap)*gap;shapeContext.fillStyle='red';shapeContext.textBaseline='middle';shapeContext.textAlign='center';}
function processCanvas(){var pixels=shapeContext.getImageData(0,0,shapeCanvas.width,shapeCanvas.height).data;dots=[],pixels,x=0,y=0,fx=shapeCanvas.width,fy=shapeCanvas.height,w=0,h=0;for(var p=0;p<pixels.length;p+=(4*gap)){if(pixels[p+ 3]>0){dots.push(new S.Point({x:x,y:y}));w=x>w?x:w;h=y>h?y:h;fx=x<fx?x:fx;fy=y<fy?y:fy;}
x+=gap;if(x>=shapeCanvas.width){x=0;y+=gap;p+=gap*4*shapeCanvas.width;}}
return{dots:dots,w:w+ fx,h:h+ fy};}
function setFontSize(s){shapeContext.font='bold '+ s+'px '+ fontFamily;}
function isNumber(n){return!isNaN(parseFloat(n))&&isFinite(n);}
function init(){fit();window.addEventListener('resize',fit);}
init();return{imageFile:function(url,callback){var image=new Image();var a=S.Drawing.getArea();image.onload=function(){shapeContext.clearRect(0,0,shapeCanvas.width,shapeCanvas.height);shapeContext.drawImage(this,0,0,a.h*0.6,a.h*0.6);callback(processCanvas());};image.onerror=function(){callback(S.ShapeBuilder.letter('What?'));}
image.src=url;},circle:function(d){var r=Math.max(0,d)/ 2;
shapeContext.clearRect(0,0,shapeCanvas.width,shapeCanvas.height);shapeContext.beginPath();shapeContext.arc(r*gap,r*gap,r*gap,0,2*Math.PI,false);shapeContext.fill();shapeContext.closePath();return processCanvas();},letter:function(l){var s=0;setFontSize(fontSize);s=Math.min(fontSize,(shapeCanvas.width/shapeContext.measureText(l).width)*0.8*fontSize,(shapeCanvas.height/fontSize)*(isNumber(l)?1:0.45)*fontSize);setFontSize(s);shapeContext.clearRect(0,0,shapeCanvas.width,shapeCanvas.height);shapeContext.fillText(l,shapeCanvas.width/2,shapeCanvas.height/2);return processCanvas();},rectangle:function(w,h){var dots=[],width=gap*w,height=gap*h;for(var y=0;y<height;y+=gap){for(var x=0;x<width;x+=gap){dots.push(new S.Point({x:x,y:y,}));}}
return{dots:dots,w:width,h:height};}};}());S.Shape=(function(){var dots=[],width=0,height=0,cx=0,cy=0;function compensate(){var a=S.Drawing.getArea();cx=a.w/2- width/2;cy=a.h/2- height/2;}
return{shuffleIdle:function(){var a=S.Drawing.getArea();for(var d=0;d<dots.length;d++){if(!dots[d].s){dots[d].move({x:Math.random()*a.w,y:Math.random()*a.h});}}},switchShape:function(n,fast){var size,a=S.Drawing.getArea();width=n.w;height=n.h;compensate();if(n.dots.length>dots.length){size=n.dots.length- dots.length;for(var d=1;d<=size;d++){dots.push(new S.Dot(a.w/2,a.h/2));}}
var d=0,i=0;while(n.dots.length>0){i=Math.floor(Math.random()*n.dots.length);dots[d].e=fast?0.25:(dots[d].s?0.14:0.11);if(dots[d].s){dots[d].move(new S.Point({z:Math.random()*20+ 10,a:Math.random(),h:18}));}else{dots[d].move(new S.Point({z:Math.random()*5+ 5,h:fast?18:30}));}
dots[d].s=true;dots[d].move(new S.Point({x:n.dots[i].x+ cx,y:n.dots[i].y+ cy,a:1,z:5,h:0}));n.dots=n.dots.slice(0,i).concat(n.dots.slice(i+ 1));d++;}
for(var i=d;i<dots.length;i++){if(dots[i].s){dots[i].move(new S.Point({z:Math.random()*20+ 10,a:Math.random(),h:20}));dots[i].s=false;dots[i].e=0.04;dots[i].move(new S.Point({x:Math.random()*a.w,y:Math.random()*a.h,a:0.3,z:Math.random()*4,h:0}));}}},render:function(){for(var d=0;d<dots.length;d++){dots[d].render();}}}}());S.init();
</script>
<div style="display:none"></div></body>
</html>

三、精彩专栏

看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

情人节程序员用HTML网页表白【粒子动画】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript相关推荐

100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
120款❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100 ...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画海贼王作者是尾田荣一郎主页分为漫画简 ...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画海贼王作者是尾田荣一郎主页分为漫画简 ...
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适 ...
HTML5期末大作业：电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计计算机毕设网 ...
情人节程序员用HTML网页表白【粒子告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【彩色酷炫的空间背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【在一起计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【嫦娥奔月(满屏泡泡)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

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