远方的海
远方的海,WordPress,免费
2014 Oct 27 04 : 58

花瓣飘落的表白页面代码

您当前的位置: 首页 > 建站资源 > 前端 > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

WordPress网站也可以制作这样一个酷炫的表白页面哦~这是一个利用jQuery和html5特效做出来的纯代码效果的开源表白页面。

页面有爱心型的花瓣飘落还有打字的效果,加上背景音乐是非常不错的!

html代码

其实我有自己做了一个,不过不给大家看文字了,对于花瓣的特效,给出一个用本页面代码成功完成的DEMO查看效果效果如下(其实这个效果也可以弄到自己网站里面加点悬浮物什么的)

花瓣飘落的表白页面代码

在网站的根目录里面新建一个i-love-you.html,里面放入以下代码:里面的XX自己写吧!!

<!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>源代码来自远方的海</title>
<link type=“text/css” rel=“stylesheet” href=“./index_files/default.css”>
<script type=’text/javascript’ src=’http://apps.bdimg.com/libs/jquery/1.8.2/jquery.min.js’></script>
<script type=“text/javascript” src=“./index_files/jscex.min.js”></script>
<script type=“text/javascript” src=“./index_files/jscex-parser.js”></script>
<script type=“text/javascript” src=“./index_files/jscex-jit.js”></script>
<script type=“text/javascript” src=“./index_files/jscex-builderbase.min.js”></script>
<script type=“text/javascript” src=“./index_files/jscex-async.min.js”></script>
<script type=“text/javascript” src=“./index_files/jscex-async-powerpack.min.js”></script>
<script type=“text/javascript” src=“./index_files/functions.js” charset=“utf-8″></script>
<script type=“text/javascript” src=“./index_files/love.js” charset=“utf-8″></script>
<style type=“text/css”>
<!–
.STYLE1 {color: #666666}
–>
</style>
</head>
<body> <audio autoplay=“autoplay”>
<source src=“http://m1.music.126.net/_Vp8RgfoNEvfYLBTGvCC9g==/1326011023133539.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”>
<span class=“say”>来自seavia.com</span><br>
<span class=“say”> </span><br>
<span class=“say”> To:<span class=“pink”> XX </span> </span><br>
<span class=“say”> </span><br>
<span class=“say”>// XX</span><br>
<span class=“say”> </span><br>
<span class=“say”>// XX。</span><br>
<span class=“say”> </span><br>
<span class=“say”>// XX。</span><br>
<span class=“say”> </span><br>
<span class=“say”>// XX…</span><br>
<span class=“say”> </span><br>
<span class=“say”>// XX</span><br>
<span class=“say”> </span><br>
<span class=“say”>// XX…</span><br>
<span class=“say”> </span><br>
<span class=“say”>// XX</span><br>
<span class=“say”> </span><br>
<span class=“say”><span class=“space”></span> — By-<span class=“blue”>XX</span>–</span>
</div>
</div>
<div id=“clock-box”>
<span class=“blue”>X</span><span class=“STYLE1″>和</span> <span class=“pink”>X</span><span class=“STYLE1″>X</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(2014, 09, -1); //这里是设定的纪念日的时间(年月日)
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></body></html>

下载所需的css和js文件

下载所需文件点击下载,把解压后的文件夹依然上传到网站根目录下~

插入喜欢的音乐

上述代码的21行可以插入你喜欢的音乐的绝对路径,这里Sven选取的是一首吉他曲。

关于如何获取一首音乐的绝对路径:可以先把需要的音乐下载下来,然后传到七牛中,然后获取该音乐七牛云里面的路径。

访问此页面:输入域名加/i-love-you.html即可,如http://www.seavia.com/i-love-you.html。当然我不会告诉你们我的路径的,哈哈。

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:前端 建站资源

您可能也会喜欢

发表回复

Post Comment


  1. X隐者博客 :

    这个可以试试,能不能达到病毒传播的效果呢

    2016-11-14
  2. null :

    怎么说实现那棵树在右边一点生长

    2016-5-26
  3. 茉莉 :

    来宁老师这里逛逛~~这里的表情好Q啊~~~·
    顺便,,,,,这个这么复杂 :o

    2015-2-3
    • Sven水神 :

      还好还好啦,这个也不是我原创的

      2015-2-8
  4. 123 :

    请问楼主有办法停止计时吗?
    跟女友分手了,但我不想删掉它,就想让时间定格。。

    2015-1-23
    • Sven水神 :

      先默哀…最简单的方法,你把原先计时区的div去了,直接写个固定的时间代替就好。

      2015-1-26
  5. 各种小白 :

    请问打字效果的速度怎么更改,还有换行速度

    2014-11-29
  6. 各种小白 :

    这个可以更改打字效果的时间咩?可以的话,能告诉我咩???

    2014-11-27
    • Sven水神 :

      可以,我记得js代码文件里面有时间设置。你可以找找。 :!:

      2015-1-26
  7. 各种小白 :

    还有博主,对于小白来说传到VPS可能更简单一些

    2014-11-8
    • 远方的海水神 :

      博主自己还在用着虚拟主机!

      2014-11-8
  8. 各种小白 :

    博主,那啥,你不告诉我们的绝对路径不是可以右键粗来咩?

    2014-11-8
    • 远方的海水神 :

      怎么右键出来!我用的别的域名,哈哈!

      2014-11-8
  9. 陌小雨 :

    不错,搜藏了!

    2014-10-29
    • Sven水神 :

      哈~~谢谢支持~

      2014-10-31
  10. 免费部落 :

    这个好,下次试试!

    2014-10-27
    • 远方的海水神 :

      哈哈~效果还是挺不错的~~

      2014-10-28