最浪漫的编程代码教学，十款代码表白小特效

来源：引流技巧编辑：引流技巧时间：2024-10-29

十款表白小特效用代码表白一个比一个浪漫赶紧收藏起来吧！！！

文章简介

最近看了一街坊视频，问路人“你眼中的程序员是怎样的?”

然后一堆关键词就出来了“直男、宅、不懂浪漫、秃头、掉发、油头、戴眼镜、瘦、没得休息、枯燥乏味、不修边幅、做事有逻辑、学霸、认真、憨厚老实、可爱哈哈哈哈哈哈”。

说程序员是直男，不可否认，大多数程序员都挺直，因为我们没有那么多弯弯绕绕。有心思兜圈子，不如回去写几行代码。

早年雷军说“我喜欢写代码，代码的世界很简单”

最浪漫的编程代码教学，十款代码表白小特效

程序员，格子衫，不浪漫，直男，人傻钱多……一点都不懂得浪漫！谁说我们不懂浪漫的？不会制造惊喜的？真的是这样么？不不不你错了程序员一旦浪漫起来，真没其他人啥事了！！！

最浪漫的编程代码教学，十款代码表白小特效

程序员的大多数时间都是面对电脑，没有乱七八糟的应酬，缺乏交际的程序员对待一份感情也会非常的认真。程序员也许在生活中会比较宅，但是千万不要说程序猿不懂浪漫。当你不开心了，他可以分分钟做出一个玫瑰花、心形、烟花等告白小程序给你制造小惊喜。

最浪漫的编程代码教学，十款代码表白小特效

特效一（动图太大了上传不了只录了一部分）

最浪漫的编程代码教学，十款代码表白小特效

部分代码如下

<body><audioautoplay="autopaly"><sourcesrc="renxi.mp3"type="audio/mp3"/></audio><divid="main"><divid="wrap"><divid="text"><divid="code"><fontcolor="#FF0000"><spanclass="say">浮世三千吾爱有三日月与卿</span><br><spanclass="say"></span><br><spanclass="say">日为朝月为暮卿为朝朝暮暮</span><br><spanclass="say"></span><br><spanclass="say">在这浮浮沉沉的大千世界里我爱的只有三样</span><br><spanclass="say"></span><br><spanclass="say">太阳月亮和我爱的你</span><br><spanclass="say"></span><br><spanclass="say">太阳带给我们白昼和希望月亮带给我们夜幕和宁静 </span><br><spanclass="say"></span><br><spanclass="say">你与我的朝夕相伴于我而言即是永恒你是我一生挚爱</span><br><spanclass="say"></span><br><spanclass="say">一生爱一人很难，也不丢人</span><br><spanclass="say"></span><br><spanclass="say">最美的爱情愿景不就是"愿得一心人白首不相离"嘛</span><br><spanclass="say"></span><br><spanclass="say">如果可以请牢记当初的爱情承诺记住最初的美好</span><br><spanclass="say"></span><br><spanclass="say">愿岁月静好浅笑安然一切美好如约而至</span><br><spanclass="say"></span><br></font></div></div><divid="clock-box"><spanclass="STYLE1"></span><fontcolor="#33CC00">愿得一心人，白首不相离</font><spanclass="STYLE1">这简单的话语……</span><divid="clock"></div></div><canvasid="canvas"width="1100"height="680"></canvas></div></div><script>(function(){varcanvas=$('#canvas');if(!canvas[0].getContext){$("#error").show();returnfalse;}varwidth=canvas.width();varheight=canvas.height();canvas.attr("width",width);canvas.attr("height",height);varopts={seed:{x:width/2-20,color:"rgb(190, 26, 37)",scale:2},branch:[[535,680,570,250,500,200,30,100,[[540,500,455,417,340,400,13,100,[[450,435,434,430,394,395,2,40]]],[550,445,600,356,680,345,12,100,[[578,400,648,409,661,426,3,80]]],[539,281,537,248,534,217,3,40],[546,397,413,247,328,244,9,80,[[427,286,383,253,371,205,2,40],[498,345,435,315,395,330,4,60]]],[546,357,608,252,678,221,6,100,[[590,293,646,277,648,271,2,80]]]]]],bloom:{num:700,width:1080,height:650,},footer:{width:1200,height:5,speed:10,}}vartree=newTree(canvas[0],width,height,opts);varseed=tree.seed;varfoot=tree.footer;varhold=1;canvas.click(function(e){varoffset=canvas.offset(),x,y;x=e.pageX-offset.left;y=e.pageY-offset.top;if(seed.hover(x,y)){hold=0;canvas.unbind("click");canvas.unbind("mousemove");canvas.removeClass('hand');}}).mousemove(function(e){varoffset=canvas.offset(),x,y;x=e.pageX-offset.left;y=e.pageY-offset.top;canvas.toggleClass('hand',seed.hover(x,y));});varseedAnimate=eval(Jscex.compile("async",function(){seed.draw();while(hold){$await(Jscex.Async.sleep(10));}while(seed.canScale()){seed.scale(0.95);$await(Jscex.Async.sleep(10));}while(seed.canMove()){seed.move(0,2);foot.draw();$await(Jscex.Async.sleep(10));}}));vargrowAnimate=eval(Jscex.compile("async",function(){do{tree.grow();$await(Jscex.Async.sleep(10));}while(tree.canGrow());}));varflowAnimate=eval(Jscex.compile("async",function(){do{tree.flower(2);$await(Jscex.Async.sleep(10));}while(tree.canFlower());}));varmoveAnimate=eval(Jscex.compile("async",function(){tree.snapshot("p1",240,0,610,680);while(tree.move("p1",500,0)){foot.draw();$await(Jscex.Async.sleep(10));}foot.draw();tree.snapshot("p2",500,0,610,680);//会有闪烁不得意这样做,(＞﹏＜)canvas.parent().css("background","url("+tree.toDataURL('image/png')+")");canvas.css("background","#ffe");$await(Jscex.Async.sleep(300));canvas.css("background","none");}));varjumpAnimate=eval(Jscex.compile("async",function(){varctx=tree.ctx;while(true){tree.ctx.clearRect(0,0,width,height);tree.jump();foot.draw();$await(Jscex.Async.sleep(25));}}));vartextAnimate=eval(Jscex.compile("async",function(){vartogether=newDate();together.setFullYear(2010,1,15);//时间年月日together.setHours(16);//小时together.setMinutes(53);//分钟together.setSeconds(0);//秒前一位together.setMilliseconds(2);//秒第二位$("#code").show().typewriter();$("#clock-box").fadeIn(500);while(true){timeElapse(together);$await(Jscex.Async.sleep(1000));}}));varrunAsync=eval(Jscex.compile("async",function(){$await(seedAnimate());$await(growAnimate());$await(flowAnimate());$await(moveAnimate());textAnimate().start();$await(jumpAnimate());}));runAsync().start();})();</script>

特效二

最浪漫的编程代码教学，十款代码表白小特效

<!DOCTYPE html><html><head><metacharset="utf-8"/><title>zhaoyeming</title><linkrel="stylesheet"href="css/hovertree.css"/></head><body><divclass="hovertreeinfo"><h2></h2></div><audioloopsrc="img/qianyuqianxun.mp3"id="audio"autoplaypreload="auto">该浏览器不支持audio属性</audio><scripttype="text/javascript">//--创建页面监听，等待微信端页面加载完毕触发音频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();});//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放document.addEventListener('touchstart', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();}audioAutoPlay();});</script><divclass="wrap"><divclass="cube"><divclass="out_front"><imgsrc="img/img01.jpg "class="pic"/></div><divclass="out_back"><imgsrc="img/img02.jpg"class="pic"/></div><divclass="out_left"><imgsrc="img/img03.jpg"class="pic"/></div><divclass="out_right"><imgsrc="img/img04.jpg"class="pic"/></div><divclass="out_top"><imgsrc="img/img05.jpg"class="pic"/></div><divclass="out_bottom"><imgsrc="img/img06.jpg"class="pic"/></div><spanclass="in_front"><imgsrc="img/img07.jpg"class="in_pic"/></span><spanclass="in_back"><imgsrc="img/img08.jpg"class="in_pic"/></span><spanclass="in_left"><imgsrc="img/img09.jpg"class="in_pic"/></span><spanclass="in_right"><imgsrc="img/img10.jpg"class="in_pic"/></span><spanclass="in_top"><imgsrc="img/img11.jpg"class="in_pic"/></span><spanclass="in_bottom"><imgsrc="img/img12.jpg"class="in_pic"/></span></div></div></body></html>

特效三

最浪漫的编程代码教学，十款代码表白小特效

代码如下

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>jQuery爱心表白动画代码</title><linkhref="css/default.css"type="text/css"rel="stylesheet"><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/garden.js"></script><scripttype="text/javascript"src="js/functions.js"></script></head><body><divid="mainDiv"><divid="content"><divid="code"><h1><spanclass="comments">我这一辈子走过许多地方的路</span><br/></h1><spanclass="comments"></span><br/><h1><spanclass="comments">行过许多地方的桥</span><br/></h1><spanclass="comments"></span><br/><h1><spanclass="comments">看过许多次数的云</span><br/></h1><spanclass="comments"></span><br/><h1><spanclass="comments">喝过许多种类的酒</span><br/><spanclass="comments"></span><br/><h1><spanclass="comments">却只爱过一个正当最好年龄的人</span><br/></h1><spanclass="comments"></span><br/></div><divid="loveHeart"><canvasid="garden"></canvas><divid="words"><divid="messages"><h4><pclass="text">I love you three thousand times </p></h4><divid="elapseClock"></div></div></div></div></div><divid="copyright"><ahref="#">....</a><br/><ahref="#">....</a><br/></div></div><scripttype="text/javascript">varoffsetX = $("#loveHeart").width() / 2;varoffsetY = $("#loveHeart").height() / 2- 55;vartogether = newDate();together.setFullYear(2013, 2, 28);together.setHours(20);together.setMinutes(0);together.setSeconds(0);together.setMilliseconds(0);if(!document.createElement('canvas').getContext) {varmsg = document.createElement("div");msg.id = "errorMsg";msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; document.body.appendChild(msg);$("#code").css("display", "none")$("#copyright").css("position", "absolute");$("#copyright").css("bottom", "10px");document.execCommand("stop");} else{setTimeout(function() {startHeartAnimation();}, 5000);timeElapse(together);setInterval(function() {timeElapse(together);}, 500);adjustCodePosition();$("#code").typewriter();}</script></body></html>

特效四

最浪漫的编程代码教学，十款代码表白小特效

特效五

最浪漫的编程代码教学，十款代码表白小特效

部分代码如下

特效六

最浪漫的编程代码教学，十款代码表白小特效

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>爱心</title><style>*{margin:0; padding:0;}body{ background-color: #1E1E1E; }</style></head><body><canvas ></canvas><script>var hearts = [];var canvas = document.getElementById('drawHeart');var wW = window.innerWidth;var wH = window.innerHeight;// 创建画布var ctx = canvas.getContext('2d');//创建图片对象var heartImage = newImage();heartImage.src = 'img/heart.svg';var num = 100;init();window.addEventListener('resize', function(){ wW = window.innerWidth; wH = window.innerHeight;});//初始化画布大小function init(){canvas.width = wW;canvas.height = wH;for(var i = 0; i < num; i++){hearts.push(newHeart(i%5));}requestAnimationFrame(render);}function getColor(){var val = Math.random() * 10;if(val > 0&& val <= 1){return'#00f';} elseif(val > 1&& val <= 2){return'#f00';} elseif(val > 2&& val <= 3){return'#0f0';} elseif(val > 3&& val <= 4){return'#368';} elseif(val > 4&& val <= 5){return'#666';} elseif(val > 5&& val <= 6){return'#333';} elseif(val > 6&& val <= 7){return'#f50';} elseif(val > 7&& val <= 8){return'#e96d5b';} elseif(val > 8&& val <= 9){return'#5be9e9';} else{return'#d41d50';}}function getText(){var val = Math.random() * 10;if(val > 1&& val <= 3){return'爱你一辈子';} elseif(val > 3&& val <= 5){return'感谢你';} elseif(val > 5&& val <= 8){return'喜欢你';} else{return'I Love You';}}function Heart(type){this.type = type;//初始化生成范围this.x = Math.random() * wW;this.y = Math.random() * wH;this.opacity = Math.random() * .5+ .5;//偏移量this.vel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5}this.initialW = wW * .5;this.initialH = wH * .5;//缩放比例this.targetScale = Math.random() * .15+ .02; //最小0.02this.scale = Math.random() * this.targetScale;//文字位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;this.fs = Math.random() * 10;this.text = getText();this.fvel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5,f: (Math.random() - .5) * 2}}Heart.prototype.draw = function(){ctx.save();ctx.globalAlpha = this.opacity;ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);ctx.scale(this.scale + 1, this.scale + 1); if(!this.type){ //设置文字属性ctx.fillStyle = getColor(); ctx.font = 'italic '+ this.fs + 'px sans-serif'; //填充字符串 ctx.fillText(this.text, this.fx, this.fy); }ctx.restore();}Heart.prototype.update = function(){this.x += this.vel.x;this.y += this.vel.y;if(this.x - this.width > wW || this.x + this.width < 0){//重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}if(this.y - this.height > wH || this.y + this.height < 0){//重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}//放大this.scale += (this.targetScale - this.scale) * .1;this.height = this.scale * this.initialH;this.width = this.height * 1.4;//-----文字-----this.fx += this.fvel.x;this.fy += this.fvel.y;this.fs += this.fvel.f;if(this.fs > 50){this.fs = 2;}if(this.fx - this.fs > wW || this.fx + this.fs < 0){//重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}if(this.fy - this.fs > wH || this.fy + this.fs < 0){//重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}}function render(){ctx.clearRect(0, 0, wW, wH);for(var i = 0; i < hearts.length; i++){hearts[i].draw();hearts[i].update();}requestAnimationFrame(render);}</script></body></html>

特效七

最浪漫的编程代码教学，十款代码表白小特效

<!doctype html><html><head><metacharset="utf-8"><title>canvas五彩斑斓的粒子动画特效</title><style>body{ overflow: hidden; margin: 0; padding: 0; background: hsla(242, 30%, 5%, 1); } canvas{ width: 100%; } </style></head><body><canvasid='canv'></canvas><script>/* (Book REF) HTML5 Canvas Ch. 5: Math, Physics, and Animation ::: Uniform Circular Motion By Steve Fulton and Jeff Fulton */window.requestAnimFrame = (function() { returnwindow.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/ 60); }; })(); window.addEventListener('load', start, false); varc, $, w, h, msX, msY, midX, midY, num = 650, parts = [], begin = 50, repeat = 20, end = Math.PI * 2, force = null, msdn = false; functionstart() { c = document.getElementById('canv'); $ = c.getContext('2d'); w = c.width = window.innerWidth; h = c.height = window.innerHeight; midX = w / 2; midY = h / 2; force = Math.max(w, h) * 0.09; flow = begin; window.requestAnimFrame(create); run(); } functionrun() { window.requestAnimFrame(run); go(); } functionPart() { this.deg = 0; this.rad = 0; this.x = 0; this.y = 0; this.distX = 0; this.distY = 0; this.color = 'rgb('+ Math.floor(Math.random() * 130) + ','+ Math.floor(Math.random() * 50) + ','+ Math.floor(Math.random() * 100) + ')'; this.size; } functioncreate() { varn = num; while(n--) { varp = newPart(); p.deg = Math.floor(Math.random() * 360); p.rad = Math.floor(Math.random() * w * 0.5); p.x = p.distX = Math.floor(Math.random() * w); p.y = p.distY = Math.floor(Math.random() * h); p.size = 1+ Math.floor(Math.random() * (p.rad * 0.055)); parts[n] = p; } c.onmousemove = msmv; c.onmousedown = msdn; c.onmouseup = msup; varint = setInterval(function() { flow--; if(flow === repeat) clearInterval(int); }, 20); } functiongo() { $.globalCompositeOperation = 'source-over'; $.fillStyle = 'hsla(242, 30%, 5%, .55)'; $.fillRect(0, 0, w, h); $.globalCompositeOperation = 'lighter'; varmx = msX; varmy = msY; varbounds = force; if(msdn) { bounds = force * 2; } varn = num; while(n--) { varp = parts[n]; varradi = Math.PI / 180* p.deg; p.distX = midX + p.rad * Math.cos(radi); p.distY = midY + p.rad * Math.sin(radi) * 0.4; if(mx && my) { varreact = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9)); if(p.distX - mx > 0&& p.distX - mx < bounds && p.distY - my > 0&& p.distY - my < bounds) { p.distX += react; p.distY += react; } elseif(p.distX - mx > 0&& p.distX - mx < bounds && p.distY - my < 0&& p.distY - my > -bounds) { p.distX += react; p.distY -= react; } elseif(p.distX - mx < 0&& p.distX - mx > -bounds && p.distY - my > 0&& p.distY - my < bounds) { p.distX -= react; p.distY += react; } elseif(p.distX - mx < 0&& p.distX - mx > -bounds && p.distY - my < 0&& p.distY - my > -bounds) { p.distY -= react; p.distY -= react; } } p.x += ((p.distX - p.x) / flow); p.y += ((p.distY - p.y) / flow); varx = p.x; vary = p.y; vars = p.size * (p.y * 1.5/ h); if(s < 0.1) { s = 0; } $.beginPath(); $.fillStyle = p.color; $.arc(x, y, s, 0, end, true); $.fill(); $.closePath(); varvary; if(p.size < 2) { vary = 4; } elseif(p.size < 3) { vary = 3; } elseif(p.size < 4) { vary = 2; } else{ vary = 1; } vary *= (p.y / (h * 0.9)); p.deg += vary; p.deg = p.deg % 360; } } functionmsmv(e) { varp = getPos(e.target); varsX = window.pageXOffset; varsY = window.pageYOffset; msX = e.clientX - p.x + sX; msY = e.clientY - p.y + sY; } functionmsdn(e) { msdn = true; } functionmsup(e) { msdn = false; } functiongetPos(el) { varcosmo = {}; cosmo.x = el.offsetLeft; cosmo.y = el.offsetTop; while(el.offsetParent) { el = el.offsetParent; cosmo.x += el.offsetLeft; cosmo.y += el.offsetTop; } returncosmo; } </script></body></html>