转眼又到了传统的情人节七夕了，今天给大家分享之前收藏的七夕表白网页源代码合集，让程序员的恋人们感受一下不一样的浪漫。
表白源码一：
<script>(function(){var canvas = $('#canvas');if (!canvas[0].getContext) {$("#error").show();return false;}var width = canvas.width();var height = canvas.height();canvas.attr("width", width);canvas.attr("height", height);var opts = {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,}}var tree = new Tree(canvas[0], width, height, opts);var seed = tree.seed;var foot = tree.footer;var hold = 1;canvas.click(function(e) {var offset = 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){var offset = canvas.offset(), x, y;x = e.pageX - offset.left;y = e.pageY - offset.top;canvas.toggleClass('hand', seed.hover(x, y));});var seedAnimate = eval(pile("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));}}));var growAnimate = eval(pile("async", function () {do {tree.grow();$await(Jscex.Async.sleep(10));} while (tree.canGrow());}));var flowAnimate = eval(pile("async", function () {do {tree.flower(2);$await(Jscex.Async.sleep(10));} while (tree.canFlower());}));var moveAnimate = eval(pile("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");}));var jumpAnimate = eval(pile("async", function () {var ctx = tree.ctx;while (true) {tree.ctx.clearRect(0, 0, width, height);tree.jump();foot.draw();$await(Jscex.Async.sleep(25));}}));var textAnimate = eval(pile("async", function () {var together = new Date();together.setFullYear(, 04, -14); //时间年月日together.setHours(0);//小时together.setMinutes(0);//分钟together.setSeconds(0);//秒前一位together.setMilliseconds(2);//秒第二位$("#code").show().typewriter();$("#clock-box").fadeIn(500);while (true) {timeElapse(together);$await(Jscex.Async.sleep(1000));}}));var runAsync = eval(pile("async", function () {$await(seedAnimate());$await(growAnimate());$await(flowAnimate());$await(moveAnimate());textAnimate().start();$await(jumpAnimate());}));runAsync().start();})();</script>
表白源码二：
<div id='content'><ul class='content-wrap'><!-- 第一副画面 --><li><!-- 背景图 --><div class="a_background"><div class="a_background_top"></div><div class="a_background_middle"></div><div class="a_background_botton"></div></div><!-- 云 --><div class="cloudArea"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div><!-- 太阳 --><div id="sun"></div></li><!-- 第二副画面 --><li><!-- 背景图 --><div class="b_background"></div><div class="b_background_preload"></div><!-- 商店 --><div class="shop"><div class="door"><div class="door-left"></div><div class="door-right"></div></div><!-- 灯 --><div class="lamp"></div></div><!-- 鸟 --><div class="bird"></div></li><!-- 第三副画面 --><li><!-- 背景图 --><div class="c_background"><div class="c_background_top"></div><div class="c_background_middle"></div><div class="c_background_botton"></div></div><!-- 小女孩 --><div class="girl"></div><div class="bridge-bottom"><div class="water"><div id="water1" class="water_1"></div><div id="water2" class="water_2"></div><div id="water3" class="water_3"></div><div id="water4" class="water_4"></div></div></div><!-- 星星 --><ul class="stars"><li class="stars1"></li><li class="stars2"></li><li class="stars3"></li><li class="stars4"></li><li class="stars5"></li><li class="stars6"></li></ul><div class="logo">圆，我爱你</div></li></ul><!-- 雪花 --><div id="snowflake"></div><!-- 小男孩 --><div id="boy" class="charector"></div></div>
更多源码分享
用心制作的网页效果加上动听的音乐，我相信你的他（她）一定会被你感动的。
祝你表白成功，有情人终成眷属！
如果觉得《表白神器！程序员七夕情人节源码合集》对你有帮助，请点赞、收藏，并留下你的观点哦！
