情人节少不了送花送礼物,作为一个程序员,当然不会在送什么礼物上给你指点一二,但可以发挥自己的优势,但是可以通过制作网站的方式打动她,下面给大家推荐几个经典表白网站示例,下载源码简单修改文字即可。
1,唯美表白网页
2,烂漫爱心表白动画(程序员也是很烂漫的)
3,情人节表白放烟花动画特效
4,520爱心背景表白网页
5,卡通短片七夕情人节送花动画场景
6,love场景式表白
....
持续更新中
代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery+Html5实现唯美表白动画代码</title> <link type="text/css" rel="stylesheet" href="./js/default.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/jscex.min.js"></script> <script type="text/javascript" src="./js/jscex-parser.js"></script> <script type="text/javascript" src="./js/jscex-jit.js"></script> <script type="text/javascript" src="./js/jscex-builderbase.min.js"></script> <script type="text/javascript" src="./js/jscex-async.min.js"></script> <script type="text/javascript" src="./js/jscex-async-powerpack.min.js"></script> <script type="text/javascript" src="./js/functions.js" charset="utf-8"></script> <script type="text/javascript" src="./js/love.js" charset="utf-8"></script> <style type="text/css"> <!-- .STYLE1 {color: #666666} --> </style> </head> <body> <audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /> </audio> <div id="main"> <div id="error">本页面采用HTML5编辑,目前您的浏览器无法显示,请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器,或者其他游览器的最新版本。</div> <div id="wrap"> <div id="text"> <div id="code"> <font color="#FF0000"> <span class="say">我爱你,虽然你看不见我对你的告白</span><br> <span class="say"> </span><br> <span class="say"> 我知道我不会甜言蜜语,但是我会用行动证明一切</span><br> <span class="say"> </span><br> <span class="say">你说我啰嗦,有些东西因为越在乎所以越失去</span><br> <span class="say">因为我太爱你了,所以我失去你了</span><br> <span class="say">因为我太啰嗦了,所以你离开了我</span><br> <span class="say">虽然你看不见我的告白,但是我还是要把这些心里话说出来</span><br> <span class="say"> </span><br> <span class="say"><span class="space"></span> -- 爱你的老公--</span> </font></p> </div> </div> <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">我喜欢你</font> <span class="STYLE1">已经是……</span> <div id="clock"></div> </div> <canvas id="canvas" width="1100" height="680"></canvas> </div> </div> <script> </script> <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(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)); } })); var growAnimate = eval(Jscex.compile("async", function () { do { tree.grow(); $await(Jscex.Async.sleep(10)); } while (tree.canGrow()); })); var flowAnimate = eval(Jscex.compile("async", function () { do { tree.flower(2); $await(Jscex.Async.sleep(10)); } while (tree.canFlower()); })); var moveAnimate = 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"); })); var jumpAnimate = eval(Jscex.compile("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(Jscex.compile("async", function () { var together = new Date(); together.setFullYear(2016,3 , 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)); } })); var runAsync = eval(Jscex.compile("async", function () { $await(seedAnimate()); $await(growAnimate()); $await(flowAnimate()); $await(moveAnimate()); textAnimate().start(); $await(jumpAnimate()); })); runAsync().start(); })(); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Our Love Story</title> <style type="text/css"> @font-face { font-family: digit; src: url('digital-7_mono.ttf') format("truetype"); } </style> <link href="css/default.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/garden.js"></script> <script type="text/javascript" src="js/functions.js"></script> </head> <body> <div id="mainDiv"> <div id="content"> <div id="code"> <span class="comments">/**</span><br /> <span class="space"/><span class="comments">*2013—02-14,</span><br /> <span class="space"/><span class="comments">*2013-02-28.</span><br /> <span class="space"/><span class="comments">*/</span><br /> Boy name = <span class="keyword">Mr</span> LI<br /> Girl name = <span class="keyword">Mrs</span> ZHANG<br /> <span class="comments">// Fall in love river. </span><br /> The boy love the girl;<br /> <span class="comments">// They love each other.</span><br /> The girl loved the boy;<br /> <span class="comments">// AS time goes on.</span><br /> The boy can not be separated the girl;<br /> <span class="comments">// At the same time.</span><br /> The girl can not be separated the boy;<br /> <span class="comments">// Both wind and snow all over the sky.</span><br /> <span class="comments">// Whether on foot or 5 kilometers.</span><br /> <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br /> <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br /> <span class="placeholder"/><span class="comments">// Whether it is right now</span><br /> <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br /> <span class="placeholder"/>The boy has but one dream;<br /> <span class="comments">// The boy wants the girl could well have been happy.</span><br /> <br> <br> I want to say:<br /> Baby, I love you forever;<br /> </div> <div id="loveHeart"> <canvas id="garden"></canvas> <div id="words"> <div id="messages"> 亲爱的,这是我们相爱在一起的时光。 <div id="elapseClock"></div> </div> <div id="loveu"> 爱你直到永永远远。<br/> <div class="signature">- 李先生</div> </div> </div> </div> </div> <div id="copyright"> <a href="#">....</a><br /> <a href="#">....</a><br /> </div> </div> <script type="text/javascript"> var offsetX = $("#loveHeart").width() / 2; var offsetY = $("#loveHeart").height() / 2 - 55; var together = new Date(); together.setFullYear(2013, 2, 28); together.setHours(20); together.setMinutes(0); together.setSeconds(0); together.setMilliseconds(0); if (!document.createElement('canvas').getContext) { var msg = 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"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>jQuery情人节表白放烟花动画特效</title> </head> <script src="js/lib/jquery.min.js" type="text/javascript"></script> <script src="js/lib/jquery.fireworks.js" type="text/javascript"></script> <style type="text/css"> *{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; } html{ width: 100%; height: 100%; } body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;} .share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; } .content{ padding: 80px 20px;} .text_wrapper{ display: -webkit-box; display: flex; } .text_wrapper .text{ padding-top: 20px; padding-left: 20px; } .hide{ display: none !important; } p{ margin: 0; } .btn-groups{ padding-right: 20px; text-align: center; } .heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; } .btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .btn-a{ background: #d26ae5; } .btn-b{ background: #c9c9c9; } .btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; } .btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;} .btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; } .btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;} .container{ } .container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); } .container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%,-70%); background: #f3f3f3;} .container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;} .confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; } .type_words{ padding: 12px 20px; } @keyframes breath { 0% { transform: scale3d(1,1,1); -webkit-transform: scale3d(1,1,1); transform-origin: 50% 50%; } 50%{ transform: scale3d(1.02,1.02,1.02); -webkit-transform: scale3d(1.02,1.02,1.02); transform-origin: 50% 50%; } 100%{ transform: scale3d(1,1,1); -webkit-transform: scale3d(1,1,1); transform-origin: 50% 50%; } } </style> <script type="text/javascript"> $(function() { $('#yes').click(function(event) { modal('我就知道小姐姐您一定会愿意的。(^_^)', function() { $('.page_one').addClass('hide'); $('.page_two').removeClass('hide'); // typeWrite(); fireworks(); }); }); $('#no').click(function(event) { modal('明人不说暗话!', A); }); }); function A() { modal('我喜欢你!', B); } function B() { modal('我知道你在等我这一句话', C); } function C() { modal('请您不要拒绝我', D); } function D() { modal('拒绝我,不存在的', E); } function E() { modal('这辈子都不可能让你离开我', F); } function F() { modal('跟我走吧', G); } function G() { modal('房产证上写你名', H); } function H() { modal('我会做饭', I); } function I() { modal('爱你。么么哒!', J) } function J() { modal('行,我们去民政局登记吧', function() { fireworks(); }); } function fireworks() { $('.page_one').addClass('hide'); $('.page_two').removeClass('hide'); $('.page_two').fireworks({ sound: false, opacity: 0.9, width: '100%', height: '100%' }); } function modal(content, callback) { var tpl = '<div class="container">'+ '<div class="mask"></div>'+ '<div class="modal">'+ '<p>'+ content +'</p>'+ '<button type="button" id="confirm" class="confirm">确定</button>'+ '</div>'+ '</div>'; $('body').append(tpl); $(document).on('click', '.confirm', function() { $('.container').remove(); callback(); }); } var myWords = '有人说,人的一生会遇到2920万人,而两个人相爱的概率只有0.000049。在这茫茫人海中,两个人能相遇就值得感激,能相爱更是一种难得。所以,我很庆幸上天让我遇见了你。我希望有个如你一般的人,能看完我写过的所有状态,读完我所有的日志,看完我从小到大的照片,试着听我喜欢的歌。如果可以,甚至陪我去我喜欢的地方,只想弥补错过你的青春。'; var x = 0; var speed = 150; var current = 0; function typeWrite(){ $('.type_words').html(myWords.substring(0, x++)+'_'); var timer = setTimeout("typeWrite()", speed); if (x == myWords.length) { x = myWords.length; clearTimeout(timer) } } </script> <body> <div class="share_img"><img src="images/a8b.png" alt=""></div> <div class="page_one"> <div class="content"> <div class="text_wrapper"> <img src="images/a8.png" alt=""> <div class="text"> 小姐姐,我好喜欢你,你愿意做我女朋友吗? </div> </div> </div> <div class="btn-groups"> <div class="heart-btn"> <div id="yes" class="btn btn-a"><span>愿意</span></div> </div> <div id="no" class="btn btn-b"><span>不愿意</span></div> </div> </div> <div class="page_two hide"> <div class="type_words"></div> </div> <div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
<html><!DOCTYPE HTML> <!--[if IE 6]> <html id="ie6" class="ie ie6 lt-ie9"> <![endif]--> <!--[if IE 7]> <html id="ie7" class="ie ie7 lt-ie9"> <![endif]--> <!--[if IE 8]> <html id="ie8" class="ie ie8 lt-ie9"> <![endif]--> <!--[if gte IE 9]> <html class="ie ie9"> <![endif]--> <!--[if !(IE)]><!--> <html> <!--<![endif]--> <head> <meta http-equiv='Pragma' content='no-cache' /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="author" content="DSX,工科男表白,浪漫表白,表白网站"> <meta name="description" content="这是XXX为XXX表白制作的表白网站"> <title>XXX LOVE XXX</title> <link rel="stylesheet" href="all.min.css" > </head> <body> <div class="flowtime"> <div class="ft-section section-1" data-id="section-1"> <div id="/section-1/page-1" class="ft-page page-1" data-id="page-1"> <p class="text1"><span id="text-75" contenteditable="true">XX</span> ❤ <span id="text-76" contenteditable="true">XX</span> <span id="text-77" contenteditable="true">一生一世</span></p> <p class="text2">按键盘 "↓" <span id="text-78" contenteditable="true">开始倾听工科男的浪漫表白</span></p> </div> <div id="/section-1/page-2" class="ft-page page-2" data-id="page-2"> <p class="top-text" id="text-1" contenteditable="true">过去的XX一直是一个人生活,享受着孤独,也憧憬着爱情。</p> <img src="img/iali63.jpg" tppabs="img/iali63.jpg" alt="过去的XX一直是一个人生活,享受着孤独,也憧憬着爱情。" /> </div> <div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3"> <h2 class="text" id="text-2" contenteditable="true">一个人的长廊</h2> <img src="img/iali35.jpg" tppabs="img/iali35.jpg" alt="一个人的长廊"/> </div> <div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4"> <h2 class="center-text" id="text-3" contenteditable="true">一个人的山岗</h2> <img src="img/iali6.jpg" tppabs="img/iali6.jpg" alt="一个人的山岗" /> </div> </div> <div class="ft-section section-2" data-id="section-2"> <div id="/section-2/page-1" class="ft-page page-5 full-img" data-id="page-1"> <h2 class="center-text" id="text-4" contenteditable="true">一个人的地铁</h2> <img src="img/iali19.jpg" tppabs="img/iali19.jpg" alt="一个人的地铁" /> </div> <div id="/section-2/page-2" class="ft-page page-6" data-id="page-2"> <h2 class="center-text" id="text-5" contenteditable="true">一个人的游乐场</h2> <img src="img/iali29.jpg" tppabs="img/iali29.jpg" alt="一个人的游乐场"/> </div> <div id="/section-2/page-3" class="ft-page page-7" data-id="page-3"> <h3 id="text-6" contenteditable="true">但他依然乐观,微笑着,等待着</h3> <img src="img/iali60.jpg" tppabs="img/iali60.jpg" alt="但他依然乐观,微笑着,等待着"/> </div> <div id="/section-2/page-4" class="ft-page page-8 full-img" data-id="page-4"> <h3 id="text-7" contenteditable="true">生活难免有风风雨雨</h3> <img src="img/iali51.jpg" tppabs="img/iali51.jpg" alt="生活难免有风风雨雨" /> </div> <div id="/section-2/page-5" class="ft-page page-9" data-id="page-5"> <h3 id="text-8" contenteditable="true">他总是能够轻松的应对</h3> <img src="img/iali5.jpg" tppabs="img/iali5.jpg" /> </div> <div id="/section-2/page-6" class="ft-page page-10" data-id="page-6"> <h3 id="text-9" contenteditable="true">并且面带阳光、自信的笑容</h3> <img src="img/iali22.jpg" tppabs="img/iali22.jpg" /> </div> </div> <div class="ft-section section-3" data-id="section-3"> <div id="/section-3/page-1" class="ft-page page-11 full-img" data-id="page-1"> <h3 id="text-10" contenteditable="true">生活也不会总是一帆风顺</h3> <img src="img/iali24.jpg" tppabs="img/iali24.jpg" /> </div> <div id="/section-3/page-2" class="ft-page page-12" data-id="page-2"> <h3><span id="text-11" contenteditable="true">但他每次都能勇敢的面对</span><br /><span id="text-12" contenteditable="true">随时准备接受生活的挑战</span></h3> <img src="img/iali25.jpg" tppabs="img/iali25.jpg" /> </div> <div id="/section-3/page-3" class="ft-page page-13" data-id="page-3"> <img src="img/iali64.jpg" tppabs="img/iali64.jpg" alt='可是小明的爱情又在哪里呢?' /> <h3 id="text-13" contenteditable="true">可是XX的爱情又在哪里呢?</h3> </div> <div id="/section-3/page-4" class="ft-page page-14 left-img" data-id="page-4"> <h3 id="text-14" contenteditable="true">在镜子里面吗?他不敢相信</h3> <img src="img/iali46.jpg" tppabs="img/iali46.jpg" /> </div> <div id="/section-3/page-5" class="ft-page page-15 left-img" data-id="page-5"> <h3><span id="text-15" contenteditable="true">他去问大树,我的爱情在哪里?</span><br /><span id="text-16" contenteditable="true">大树告诉他,也许就在不远的地方</span></h3> <img src="img/iali45.jpg" tppabs="img/iali45.jpg" /> </div> <div id="/section-3/page-6" class="ft-page page-16 left-img" data-id="page-6"> <h3><span id="text-17" contenteditable="true">于是,XX一个人继续向前走</span><br /><span id="text-18" contenteditable="true">走在茫茫的雪地上</span></h3> <img src="img/iali66.jpg" tppabs="img/iali66.jpg" /> </div> <div id="/section-3/page-7" class="ft-page page-17 top-text" data-id="page-7"> <h3 id="text-19" contenteditable="true">直到有一天XX与XX相遇了</h3> <img src="img/iali16.jpg" tppabs="img/iali16.jpg" /> </div> </div> <div class="ft-section section-4" data-id="section-4"> <div id="/section-4/page-1" class="ft-page page-18 full-img" data-id="page-1"> <p class="text" id="text-20" contenteditable="true">XX喜欢XX,非常非常的喜欢,因为XX的出现,XX脸上有了更加灿烂的笑容</p> <img src="img/iali11.jpg" tppabs="img/iali11.jpg" /> </div> <div id="/section-4/page-2" class="ft-page page-19" data-id="page-2"> <h3 id="text-21" contenteditable="true">可是XX会喜欢XX吗?</h3> <img src="img/iali75.jpg" tppabs="img/iali75.jpg" /> </div> <div id="/section-4/page-3" class="ft-page page-20" data-id="page-3"> <img src="img/iali59.png" tppabs="img/iali59.png" /> <h3 id="text-22" contenteditable="true">XX想。。。</h3> <img src="img/iali9.jpg" tppabs="img/iali9.jpg" /> </div> <div id="/section-4/page-4" class="ft-page page-21" data-id="page-4"> <h3 id="text-23" contenteditable="true">XX想和XX在一起</h3> <img src="img/iali59.png" tppabs="img/iali59.png" /> </div> <div id="/section-4/page-5" class="ft-page page-22 left-img" data-id="page-5"> <h3 id="text-24" contenteditable="true">然后XX会经常去找XX</h3> <img src="img/iali4.jpg" tppabs="img/iali4.jpg" /> </div> <div id="/section-4/page-6" class="ft-page page-23 left-img" data-id="page-6"> <h3 id="text-25" contenteditable="true">然后两个人一起出去玩</h3> <img src="img/iali44.jpg" tppabs="img/iali44.jpg" /> </div> <div id="/section-4/page-7" class="ft-page page-24 full-img" data-id="page-7"> <h3 id="text-26" contenteditable="true">晚上XX会把XX送回家</h3> <img src="img/iali32.jpg" tppabs="img/iali32.jpg" /> </div> </div> <div class="ft-section section-5" data-id="section-5"> <div id="/section-5/page-1" class="ft-page page-25 left-img" data-id="page-1"> <h3><span id="text-27" contenteditable="true">直到很晚</span><br /><span id="text-28" contenteditable="true">XX再一个人回家</span></h3> <img src="img/iali37.jpg" tppabs="img/iali37.jpg" /> </div> <div id="/section-5/page-2" class="ft-page page-26 top-text" data-id="page-2"> <h3 id="text-29" contenteditable="true">然后高兴地进入梦乡,在梦中还会和XX在一起</h3> <img src="img/iali10.gif" tppabs="img/iali10.gif" /> </div> <div id="/section-5/page-3" class="ft-page page-27" data-id="page-3"> <h3 id="text-30" contenteditable="true">XX想成为了XX的逛街助手</h3> <img src="img/iali67.jpg" tppabs="img/iali67.jpg" /> </div> <div id="/section-5/page-4" class="ft-page page-28" data-id="page-4"> <h3 id="text-31" contenteditable="true">然后,XX和XX一起去很多地方玩</h3> <img src="img/iali40.jpg" tppabs="img/iali40.jpg" /> </div> <div id="/section-5/page-5" class="ft-page page-29" data-id="page-5"> <h3 id="text-32" contenteditable="true">XX也想和XX一块成为一对吃货</h3> <img src="img/iali12.jpg" tppabs="img/iali12.jpg" /> </div> <div id="/section-5/page-6" class="ft-page page-30" data-id="page-6"> <h3 id="text-33" contenteditable="true">再然后,他们会搬到了一起</h3> <img src="img/iali76.gif" tppabs="img/iali76.gif" /> </div> <div id="/section-5/page-7" class="ft-page page-31" data-id="page-7"> <h3 id="text-34" contenteditable="true">再然后,XX会开始学习她的技能</h3> <img src="img/iali77.jpg" tppabs="img/iali77.jpg" /> </div> </div> <div class="ft-section section-6" data-id="section-6"> <div id="/section-6/page-1" class="ft-page page-32" data-id="page-1"> <h3 id="text-35" contenteditable="true">煮饭</h3> <img src="img/iali62.jpg" tppabs="img/iali62.jpg" /> </div> <div id="/section-6/page-2" class="ft-page page-33 top-text" data-id="page-2"> <h3 id="text-36" contenteditable="true">那时候,每天早上,他们吃着自己做的美食</h3> <img src="img/iali3.jpg" tppabs="img/iali3.jpg" /> </div> <div id="/section-6/page-3" class="ft-page page-34 left-img" data-id="page-3"> <h3 id="text-37" contenteditable="true">然后在同一个站台,高高兴兴的一起上班</h3> </div> <div id="/section-6/page-4" class="ft-page page-35" data-id="page-4"> <h3><span id="text-38" contenteditable="true">XX会感觉自己好幸福。</span><br /><span id="text-39" contenteditable="true">因为自己有了家</span><br /><span id="text-40" contenteditable="true">那个有XX在的地方</span></h3> <img src="img/iali8.gif" tppabs="img/iali8.gif" /> </div> <div id="/section-6/page-5" class="ft-page page-36 full-img" data-id="page-5"> <h3 id="text-41" contenteditable="true">他们可能偶尔也会吵架</h3> <img src="img/iali31.jpg" tppabs="img/iali31.jpg" /> </div> <div id="/section-6/page-6" class="ft-page page-37 left-img" data-id="page-6"> <h3 id="text-42" contenteditable="true">XX不想这样</h3> <img src="img/iali49.jpg" tppabs="img/iali49.jpg" /> </div> <div id="/section-6/page-7" class="ft-page page-38 bottom-text" data-id="page-7"> <img src="img/iali21.jpg" tppabs="img/iali21.jpg" /> <h3 id="text-43" contenteditable="true">一定是我有什么做的不对,XX会这么想</h3> </div> </div> <div class="ft-section section-7" data-id="section-7"> <div id="/section-7/page-1" class="ft-page page-39 left-img" data-id="page-1"> <h3 id="text-44" contenteditable="true">如果没有XX在身边,窗外就没有风景</h3> <img src="img/iali2.jpg" tppabs="img/iali2.jpg" /> </div> <div id="/section-7/page-2" class="ft-page page-40" data-id="page-2"> <h3 id="text-45" contenteditable="true">如果没有XX在身后</h3> <img src="img/iali14.jpg" tppabs="img/iali14.jpg" /> </div> <div id="/section-7/page-3" class="ft-page page-41" data-id="page-3"> <img src="img/iali30_1.jpg" tppabs="img/iali30_1.jpg" class='img1'/> <img src="img/iali30_2.jpg" tppabs="img/iali30_2.jpg" class='img2'/> <h3 id="text-46" contenteditable="true"> XX又怎会飞的更高更远</h3> </div> <div id="/section-7/page-4" class="ft-page page-42" data-id="page-4"> <h3><span id="text-47" contenteditable="true">XX不想这样。他要为XX改变自己</span><br /><span id="text-48" contenteditable="true">XX不知道XX喜欢什么,但他一定会满足她的一切。</span></h3> <img src="img/iali69.jpg" tppabs="img/iali69.jpg" /> </div> <div id="/section-7/page-5" class="ft-page page-43" data-id="page-5"> <img src="img/iali42.jpg" tppabs="img/iali42.jpg" /> <h3 id="text-49" contenteditable="true">我愿意一直陪伴着你</h3> </div> <div id="/section-7/page-6" class="ft-page page-44 left-img" data-id="page-6"> <h3><span id="text-50" contenteditable="true">爱情就像花草一样</span><br /><span id="text-51" contenteditable="true">需要用包容来浇灌</span></h3> <img src="img/iali0.jpg" tppabs="img/iali0.jpg" /> </div> <div id="/section-7/page-7" class="ft-page page-45 left-img" data-id="page-7"> <h3><span id="text-52" contenteditable="true">直到一天,XX不想让自己后悔</span><br /><span id="text-53" contenteditable="true">XX开始准备一份惊喜</span></h3> <img src="img/iali18.jpg" tppabs="img/iali18.jpg" /> </div> </div> <div class="ft-section section-8" data-id="section-8"> <div id="/section-8/page-1" class="ft-page page-46" data-id="page-1"> <img src="img/iali57.gif" tppabs="img/iali57.gif" /> <h3> <span id="text-54" contenteditable="true">看着惊喜一点点准备好了</span> <span id="text-55" contenteditable="true">XX好开心</span> <span id="text-56" contenteditable="true">因为他想象着XX看到时</span> <span id="text-57" contenteditable="true">开心的样子</span> </h3> </div> <div id="/section-8/page-2" class="ft-page page-47 top-text" data-id="page-2"> <img src="img/iali58.jpg" tppabs="img/iali58.jpg" /> <h3> <span id="text-58" contenteditable="true">想想未来他们或许</span> <span id="text-59" contenteditable="true">会有一辈子</span> <span id="text-59" contenteditable="true">XX好开心</span> <span id="text-60" contenteditable="true">或许他可以和XX一起</span> <span id="text-61" contenteditable="true">去全世界好多地方玩</span></h3> </div> <div id="/section-8/page-3" class="ft-page page-48 left-img" data-id="page-3"> <p><span id="text-62" contenteditable="true">XX也会继续努力</span><br /><span id="text-63" contenteditable="true">为了他和XX的梦之城堡</span></p> <img src="img/iali65.jpg" tppabs="img/iali65.jpg" /> </div> <div id="/section-8/page-4" class="ft-page page-49 full-img" data-id="page-4"> <img src="img/iali71.jpg" tppabs="img/iali71.jpg" /> <p class="text"> <span class='text' id="text-64" contenteditable="true">XX很幸福,因为他遇到了XX。他相信后面的每天都会是快乐的</span><br /> <span class='text' id="text-65" contenteditable="true">简简单单,体会与XX在一起的每一个刻</span> </p> </div> <div id="/section-8/page-5" class="ft-page page-50" data-id="page-5"> <p class='text' id="text-66" contenteditable="true">XX想和XX一起过幸福的生活</p> <img src="img/iali50_1.jpg" tppabs="img/iali50_1.jpg" class='img1' /> <img src="img/iali50_2.jpg" tppabs="img/iali50_2.jpg" class='img2' /> </div> <div id="/section-8/page-6" class="ft-page page-51" data-id="page-6"> <p> <span id="text-67" contenteditable="true">永远有多远?</span><br /> <span id="text-68" contenteditable="true">比时间多一秒就是永远,我会永远爱你</span><br /> <span id="text-69" contenteditable="true">世界有多大?</span><br /> <span id="text-70" contenteditable="true">你走到哪里,世界就有多大</span> </p> </div> </div> <div class="ft-section section-9" data-id="section-9"> <div id="/section-9/page-1" class="ft-page page-52 full-img" data-id="page-1"> <h3 id="text-71" contenteditable="true">如果三年后你注定是我女朋友,你何不提早行使你的权利</h3> <img src="img/iali20.jpg" tppabs="img/iali20.jpg" /> </div> <div id="/section-9/page-2" class="ft-page page-53" data-id="page-2"> <img src="img/iali68.jpg" tppabs="img/iali68.jpg" alt='happy birthday' /> <h3 id="text-72" contenteditable="true">我爱你</h3> </div> <div id="/section-9/page-3" class="ft-page page-54 center-img" data-id="page-3" > <div class="center-img">I love you</div> </div> <div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4"> <img src="img/14915.jpg" tppabs="img/14915.jpg" /> <p class="text"> <span id="text-73" contenteditable="true">我相信,XX和XX的故事会一直继续下去。</span><br /> <span id="text-74" contenteditable="true">无论精彩、平淡都会是他们喜欢的。</span><br /> <span id="text-74" contenteditable="true">XXX,我爱你</span><br /> <br /> <br /> <span> -- 按“Esc"键有惊喜</span> </p> </div> </div> </div> <div class="nojavascript">您的浏览器禁用了javascript,无法正常浏览本页面</div> <audio id="bgmMusic" src="lovebgm.mp3" autoplay="autoplay" loop preload="auto" type="audio/mp3"></audio> <script src="jquery.min.js" tppabs="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="all.min.js" ></script> <script src="love.min.js" ></script> <div class="mPower"><span id="on" title="点击暂停" style=""></span><span id="off" title="点击播放" style=""></span></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>七夕节快乐</title> <link rel='stylesheet' href='css/55c16d94000109f300000000.css' /> <link rel='stylesheet' href='css/55c16dab0001286100000000.css' /> <link rel='stylesheet' href='css/55c16dc00001fa1a00000000.css' /> <link rel='stylesheet' href='css/55c16dda0001113100000000.css' /> <script type="text/javascript" src="js/55ac9a860001a6c500000000.js"></script> <script type="text/javascript" src="js/55ac9ea30001ace700000000.js"></script> <script type="text/javascript" src="js/55c16c910001e21b00000000.js"></script> </head> <body> <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> <!-- logo图 --> <div class="logo">祝天下有情人终成眷属</div> </li> </ul> <!-- 雪花 --> <div id="snowflake"></div> <!-- 小男孩 --> <div id="boy" class="charector"></div> </div> </body> </html>
最后也祝愿各位同学能够表白成功。