十款表白小特效用代码表白一个比一个浪漫赶紧收藏起来吧！！！文章简介
最近看了一街坊视频，问路人“你眼中的程序员是怎样的?”
然后一堆关键词就出来了“直男、宅、不懂浪漫、秃头、掉发、油头、戴眼镜、瘦、没得休息、枯燥乏味、不修边幅、做事有逻辑、学霸、认真、憨厚老实、可爱哈哈哈哈哈哈”。
说程序员是直男，不可否认，大多数程序员都挺直，因为我们没有那么多弯弯绕绕。有心思兜圈子，不如回去写几行代码。
早年雷军说“我喜欢写代码，代码的世界很简单”
程序员，格子衫，不浪漫，直男，人傻钱多……一点都不懂得浪漫！谁说我们不懂浪漫的？不会制造惊喜的？真的是这样么？不不不你错了程序员一旦浪漫起来，真没其他人啥事了！！！
程序员的大多数时间都是面对电脑，没有乱七八糟的应酬，缺乏交际的程序员对待一份感情也会非常的认真。程序员也许在生活中会比较宅，但是千万不要说程序猿不懂浪漫。当你不开心了，他可以分分钟做出一个玫瑰花、心形、烟花等告白小程序给你制造小惊喜。
特效一（动图太大了上传不了只录了一部分）部分代码如下<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>特效二
<!DOCTYPEhtml><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(){functionaudioAutoPlay(){varaudio=document.getElementById(‘audio’);audio.play();document.addEventListener(“WeixinJSBridgeReady”,function(){audio.play();},false);}audioAutoPlay();});//–创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放document.addEventListener(‘touchstart’,function(){functionaudioAutoPlay(){varaudio=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>特效三代码如下
<!DOCTYPEhtml><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(){functionaudioAutoPlay(){varaudio=document.getElementById(‘audio’);audio.play();document.addEventListener(”WeixinJSBridgeReady“,function(){audio.play();},false);}audioAutoPlay();});//–创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放document.addEventListener(‘touchstart’,function(){functionaudioAutoPlay(){varaudio=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>特效六
<!DOCTYPEhtml><htmllang=”en“><head><metacharset=”UTF-8“><title>爱心</title><style>*{margin:0;padding:0;}body{background-color:#1E1E1E;}</style></head><body><canvasid=”drawHeart“></canvas><script>varhearts=[];varcanvas=document.getElementById(‘drawHeart’);varwW=window.innerWidth;varwH=window.innerHeight;//创建画布varctx=canvas.getContext(‘2d’);//创建图片对象varheartImage=newImage();heartImage.src=‘img/heart.svg’;varnum=100;init();window.addEventListener(‘resize’,function(){wW=window.innerWidth;wH=window.innerHeight;});//初始化画布大小functioninit(){canvas.width=wW;canvas.height=wH;for(vari=0;i<num;i++){hearts.push(newHeart(i%5));}requestAnimationFrame(render);}functiongetColor(){varval=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’;}}functiongetText(){varval=Math.random()*10;if(val>1&&val<=3){return‘爱你一辈子’;}elseif(val>3&&val<=5){return‘感谢你’;}elseif(val>5&&val<=8){return‘喜欢你’;}else{return‘ILoveYou’;}}functionHeart(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+‘pxsans-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;}}functionrender(){ctx.clearRect(0,0,wW,wH);for(vari=0;i<hearts.length;i++){hearts[i].draw();hearts[i].update();}requestAnimationFrame(render);}</script></body></html>特效七 <!doctypehtml><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>/
需要源码的点赞评论666
