做的一个HTML表白页面_CSS教程_动态网站制作指南
做的一个HTML表白页面
来源：人气：3916
做的一个HTML表白页面页面地址： http://myspace123.qiniudn.com/love/index.html目录文件结构：index.html&html ns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8"&&title&表白&/title&&!--引入开始--&&link rel="stylesheet" type="text/" href="style/style.css"&&scrt type="text/script" src="jquery/jquery-1.8.3.min.js"&&/script&&script type="text/" src="js/garden.js"&&/script&&script type="text/javascript" src="js/functions.js"&&/script&&!--引入结束--&&audio src="musics/致爱丽丝.mp3" autoplay="autoplay"&您使用的浏览器不支持HTML5!&/audio& &/head&&body oncontextmenu="return false" ondragstart="return false" style="zoom: 1;"&&!-- 代码开始 --&&div id="mainDiv"&&div id="content" style="width: 1110 height: 625 margin-top: 10 margin-left: 119.5"&&div id="code" style="margin-top: 50"&&span class="comments"&我害怕，&/span&&br&我会永远是那孤独的根号三。&br&&span class="comments"&三本身是一个多么美妙的数字，&/span&&br&我的这个三，&br&&span class="comments"&为何躲在那难看的根号下。&/span&&br&我多么希望自己是一个九，&br&&span class="comments"&因为九只需要一点点小小的运算，&/span&&br&便可摆脱这残酷的厄运。&br&&span class="comments"&我知道自己很难再看到我的太阳.&/span&&br&就像这无休无止的 1.7321...&br&
&span class="comments"&我不愿我的人生如此可悲。&/span&&br&直到那一天，&br&
&span class="comments"&我看到了，&/span&&br&另一个根号三。&br&
&span class="comments"&如此美丽无瑕，&/span&&br&翩翩舞动而来，&br&
&span class="comments"&我们彼此相乘，&/span&&br&得到那梦寐以求的数字，&br&
&span class="comments"&像整数一样圆满。&/span&&br&我们砸碎命运的枷锁，&br&
&span class="comments"&轻轻舞动爱情的魔杖。&/span&&br&我们的平方根，已经解开。&br&
&span class="comments"&我的爱，重获新生。&/span&&br&我无法保证能给你童话般的世界，&br&
&span class="comments"&也无法保证自己能在一夜之间长大。&/span&&br&但是我保证，&br&
&span class="comments"&你可以像公主一样永远生活在自由，幸福之中。&/span&&br&&br&I want to say:&br&&span class="key"&for&/span& (&span class="keyword"&int&/span& i=0;;i++)
&span class="keyword"&intf&/span&("&span class="comments"&I Love You!&/span&");&br&
&span class="keyword"&爱你！&/span&&/span&&/span&&/span&&/span&&/span&&/span&&/div&
&div id="loveHeart"&
&div id="messages" style="display:"&
&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 id="words"&&/div&
&/div&&/div&&/div&&/div&&!-- 代码结束 --&&script type="text/javascript"&var offsetX = $("#loveHeart").width() / 2;var offsetY = $("#loveHeart").height() / 2 - 55;var together = new Date();together.setFullYear();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 = "您使用的浏览器不支持HTML5!"; 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&　　jquery\jquery-1.8.3.min.jsjs\functions.jsvar $window = $(window), gardenCtx, gardenCanvas, $garden,var clientWidth = $(window).width();var clientHeight = $(window).height();$(function () {
// setup garden
$loveHeart = $("#loveHeart");
var offsetX = $loveHeart.width() / 2;
var offsetY = $loveHeart.height() / 2 - 55;
$garden = $("#garden");
gardenCanvas = $garden[0];
gardenCanvas.width = $("#loveHeart").width();
gardenCanvas.height = $("#loveHeart").height()
gardenCtx = gardenCanvas.getContext("2d");
gardenCtx.globalCompositetion = "lighter";
garden = new Garden(gardenCtx, gardenCanvas);
$("#content").css("width", $loveHeart.width() + $("#code").width());
$("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));
$("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));
$("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));
// renderLoop
setInterval(function () {
garden.render();
}, Garden.options.growSpeed);});$(window).resize(function() {
var newWidth = $(window).width();
var newHeight = $(window).height();
if (newWidth != clientWidth && newHeight != clientHeight) {
location.replace(location);
}});function getHeartPoint(angle) {
var t = angle / Math.PI;
var x = 19.5 * (16 * Math.pow(Math.sin(t), 3));
var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
return new Array(offsetX + x, offsetY + y);}function startHeartAnimation() {
var interval = 50;
var angle = 10;
var heart = new Array();
var animationTimer = setInterval(function () {
var bloom = getHeartPoint(angle);
var draw =
for (var i = 0; i & heart. i++) {
var p = heart[i];
var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));
if (distance & Garden.options.bloomRadius.max * 1.3) {
if (draw) {
heart.push(bloom);
garden.createRandomBloom(bloom[0], bloom[1]);
if (angle &= 30) {
clearInterval(animationTimer);
showMessages();
angle += 0.2;
}, interval);}(function($) {
$.fn.typewriter = function() {
this.each(function() {
var $ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
var timer = setInterval(function() {
var current = str.substr(progress, 1);
if (current == '&') {
progress = str.indexOf('&', progress) + 1;
progress++;
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
if (progress &= str.length) {
clearInterval(timer);
};})(jQuery);function timeElapse(date){
var current = Date();
var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
var days = Math.floor(seconds / (3600 * 24));
seconds = seconds % (3600 * 24);
var hours = Math.floor(seconds / 3600);
if (hours & 10) {
hours = "0" +
seconds = seconds % 3600;
var minutes = Math.floor(seconds / 60);
if (minutes & 10) {
minutes = "0" +
seconds = seconds % 60;
if (seconds & 10) {
seconds = "0" +
var result = "&span class=\"digit\"&" + days + "&/span& days &span class=\"digit\"&" + hours + "&/span& hours &span class=\"digit\"&" + minutes + "&/span& minutes &span class=\"digit\"&" + seconds + "&/span& seconds";
$("#elapseClock").html(result);}function showMessages() {
adjustWordsPosition();
$('#messages').fadeIn(5000, function() {
showLoveU();
});}function adjustWordsPosition() {
$('#words').css("position", "absolute
优质网站模板Html5制作的一款唯美的表白动画效果代码_HTML5 CSS3-站长素材网
您所在的位置： >
Html5制作的一款唯美的表白动画效果代码
Html5制作的一款唯美的表白动画效果代码
上传用户：游客投稿　来源：网络　日期： 11:41:11 人气：
您可能还会喜欢
本站资源均为免费自由下载，部分内容收集于互联网，版权归原作者所有，仅供学习交流用！如果有侵权内容、不妥之处，请联系我们删除。敬请谅解!表白网站制作软件|超炫表白网页生成器(爱情树)原版+3D幻灯片版-东坡下载
东坡下载：内容最丰富最安全的下载站！
→ 超炫表白网页生成器(爱情树) 原版+3D幻灯片版
你不表白你怎知道你的女神不动心呢？
你仰慕已久的女神，是否该向她表白了呢？超炫表白网页生成器可以制作生成2款表白网页，一款原版，一款3D幻灯片版，各具特色。软件几乎所有内容都可以自定义，包括网页标题，无水印、无bug，支持保存网页源码，直接发送给你的女神！表白好用吗超炫表白网页生成器(爱情树)功能介绍支持自定义网站名支持自定义文字内容支持自定义认识时间支持自定义背景音乐支持自定义双方姓名等表白网站制作软件怎么用超炫表白网页生成器(爱情树)使用方法1、打开爱情树，选择需要使用的版本2、爱情树原版：自定义各部分参数内容，然后点击【生成】按钮生成网页后需要点击图示爱心生成网页：树上会飘洒爱心3、爱情树3D幻灯片版：此版本支持修改图片幻灯片（这里可以放置你女神的相片），其余内容基本相同生成网页后，图片幻灯片支持箭头点击或是鼠标滚轮滑动同样，需要点击一下爱心预览整个网页：网页可以播放背景音乐，这里，小编无法给大家表现出来4、使用过软件，软件根目录会自动保存相关网页源码，可以直接发送给你的女神打开网页，就会产生表白效果
安卓官方手机版
IOS官方手机版
超炫表白网页生成器(爱情树)截图
超炫表白网页生成器(爱情树) 原版+3D幻灯片版
本类最新软件
本机地址CZ88.NET 网友 客人 发表于:
很好哇~~~~~
本类软件推荐
48.9M / 06-26 / 9.6.官方正式版
42.8M / 06-26 / 2.2.2.135官方去广告版
43.0M / 06-25 / 46.0.2597.26官方正式版
75.4M / 06-23 / 9.1.34.812官方最新正式版
20.0M / 06-19 / 2.0.0.918官网正式版
本类软件排行
本类软件必备
网页下载邮件加速
请简要描述您遇到的错误，我们将尽快予以修正。
轮坛转帖HTML方式
轮坛转帖UBB方式脚本简介jQuery+Html5实现唯美表白动画代码是一款动画效果很棒，程序员表白必备！
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系#qq.com(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.