本篇教程介紹了HTML+CSS入門 表白頁面實例講解，希望閱讀本篇文章以后大家有所收獲，幫助大家HTML+CSS入門。<

目錄文件結(jié)構(gòu)：

index.html

+

jquery\jquery-1.8.3.min.js

js\functions.js

var?$window?=?$(window),?gardenCtx,?gardenCanvas,?$garden,?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.globalCompositeOperation?=?"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?=?true;

for?(var?i?=?0;?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?

draw?=?false;

break;

}

}

if?(draw)?{

heart.push(bloom);

garden.createRandomBloom(bloom[0],?bloom[1]);

}

if?(angle?>=?30)?{

clearInterval(animationTimer);

showMessages();

}?else?{

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;

}?else?{

progress++;

}

$ele.html(str.substring(0,?progress)?+?(progress?&?1???‘_‘?:?‘‘));

if?(progress?>=?str.length)?{

clearInterval(timer);

}

},?75);

});

return?this;

};

})(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?

hours?=?"0"?+?hours;

}

seconds?=?seconds?%?3600;

var?minutes?=?Math.floor(seconds?/?60);

if?(minutes?

minutes?=?"0"?+?minutes;

}

seconds?=?seconds?%?60;

if?(seconds?

seconds?=?"0"?+?seconds;

}

var?result?=?""?+?days?+?"?days?"?+?hours?+?"?hours?"?+?minutes?+?"?minutes?"?+?seconds?+?"?seconds";

$("#elapseClock").html(result);

}

function?showMessages()?{

adjustWordsPosition();

$(‘#messages‘).fadeIn(5000,?function()?{

showLoveU();

});

}

function?adjustWordsPosition()?{

$(‘#words‘).css("position",?"absolute");

$(‘#words‘).css("top",?$("#garden").position().top?+?195);

$(‘#words‘).css("left",?$("#garden").position().left?+?70);

}

function?adjustCodePosition()?{

$(‘#code‘).css("margin-top",?($("#garden").height()?-?$("#code").height())?/?2);

}

function?showLoveU()?{

$(‘#loveu‘).fadeIn(3000);

}

js\garden.js

function?Vector(x,?y)?{

this.x?=?x;

this.y?=?y;

};

Vector.prototype?=?{

rotate:?function?(theta)?{

var?x?=?this.x;

var?y?=?this.y;

this.x?=?Math.cos(theta)?*?x?-?Math.sin(theta)?*?y;

this.y?=?Math.sin(theta)?*?x?+?Math.cos(theta)?*?y;

return?this;

},

mult:?function?(f)?{

this.x?*=?f;

this.y?*=?f;

return?this;

},

clone:?function?()?{

return?new?Vector(this.x,?this.y);

},

length:?function?()?{

return?Math.sqrt(this.x?*?this.x?+?this.y?*?this.y);

},

subtract:?function?(v)?{

this.x?-=?v.x;

this.y?-=?v.y;

return?this;

},

set:?function?(x,?y)?{

this.x?=?x;

this.y?=?y;

return?this;

}

};

function?Petal(stretchA,?stretchB,?startAngle,?angle,?growFactor,?bloom)?{

this.stretchA?=?stretchA;

this.stretchB?=?stretchB;

this.startAngle?=?startAngle;

this.angle?=?angle;

this.bloom?=?bloom;

this.growFactor?=?growFactor;

this.r?=?1;

this.isfinished?=?false;

//this.tanAngleA?=?Garden.random(-Garden.degrad(Garden.options.tanAngle),?Garden.degrad(Garden.options.tanAngle));

//this.tanAngleB?=?Garden.random(-Garden.degrad(Garden.options.tanAngle),?Garden.degrad(Garden.options.tanAngle));

}

Petal.prototype?=?{

draw:?function?()?{

var?ctx?=?this.bloom.garden.ctx;

var?v1,?v2,?v3,?v4;

v1?=?new?Vector(0,?this.r).rotate(Garden.degrad(this.startAngle));

v2?=?v1.clone().rotate(Garden.degrad(this.angle));

v3?=?v1.clone().mult(this.stretchA);?//.rotate(this.tanAngleA);

v4?=?v2.clone().mult(this.stretchB);?//.rotate(this.tanAngleB);

ctx.strokeStyle?=?this.bloom.c;

ctx.beginPath();

ctx.moveTo(v1.x,?v1.y);

ctx.bezierCurveTo(v3.x,?v3.y,?v4.x,?v4.y,?v2.x,?v2.y);

ctx.stroke();

},

render:?function?()?{

if?(this.r?<=?this.bloom.r)?{

this.r?+=?this.growFactor;?//?/?10;

this.draw();

}?else?{

this.isfinished?=?true;

}

}

}

function?Bloom(p,?r,?c,?pc,?garden)?{

this.p?=?p;

this.r?=?r;

this.c?=?c;

this.pc?=?pc;

this.petals?=?[];

this.garden?=?garden;

this.init();

this.garden.addBloom(this);

}

Bloom.prototype?=?{

draw:?function?()?{

var?p,?isfinished?=?true;

this.garden.ctx.save();

this.garden.ctx.translate(this.p.x,?this.p.y);

for?(var?i?=?0;?i?

p?=?this.petals[i];

p.render();

isfinished?*=?p.isfinished;

}

this.garden.ctx.restore();

if?(isfinished?==?true)?{

this.garden.removeBloom(this);

}

},

init:?function?()?{

var?angle?=?360?/?this.pc;

var?startAngle?=?Garden.randomInt(0,?90);

for?(var?i?=?0;?i?

this.petals.push(new?Petal(Garden.random(Garden.options.petalStretch.min,?Garden.options.petalStretch.max),?Garden.random(Garden.options.petalStretch.min,?Garden.options.petalStretch.max),?startAngle?+?i?*?angle,?angle,?Garden.random(Garden.options.growFactor.min,?Garden.options.growFactor.max),?this));

}

}

}

function?Garden(ctx,?element)?{

this.blooms?=?[];

this.element?=?element;

this.ctx?=?ctx;

}

Garden.prototype?=?{

render:?function?()?{

for?(var?i?=?0;?i?

this.blooms[i].draw();

}

},

addBloom:?function?(b)?{

this.blooms.push(b);

},

removeBloom:?function?(b)?{

var?bloom;

for?(var?i?=?0;?i?

bloom?=?this.blooms[i];

if?(bloom?===?b)?{

this.blooms.splice(i,?1);

return?this;

}

}

},

createRandomBloom:?function?(x,?y)?{

this.createBloom(x,?y,?Garden.randomInt(Garden.options.bloomRadius.min,?Garden.options.bloomRadius.max),?Garden.randomrgba(Garden.options.color.rmin,?Garden.options.color.rmax,?Garden.options.color.gmin,?Garden.options.color.gmax,?Garden.options.color.bmin,?Garden.options.color.bmax,?Garden.options.color.opacity),?Garden.randomInt(Garden.options.petalCount.min,?Garden.options.petalCount.max));

},

createBloom:?function?(x,?y,?r,?c,?pc)?{

new?Bloom(new?Vector(x,?y),?r,?c,?pc,?this);

},

clear:?function?()?{

this.blooms?=?[];

this.ctx.clearRect(0,?0,?this.element.width,?this.element.height);

}

}

Garden.options?=?{

petalCount:?{

min:?8,

max:?15

},

petalStretch:?{

min:?0.1,

max:?3

},

growFactor:?{

min:?0.1,

max:?1

},

bloomRadius:?{

min:?8,

max:?10

},

density:?10,

growSpeed:?1000?/?60,

color:?{

rmin:?128,

rmax:?255,

gmin:?0,

gmax:?128,

bmin:?0,

bmax:?128,

opacity:?0.1

},

tanAngle:?60

};

Garden.random?=?function?(min,?max)?{

return?Math.random()?*?(max?-?min)?+?min;

};

Garden.randomInt?=?function?(min,?max)?{

return?Math.floor(Math.random()?*?(max?-?min?+?1))?+?min;

};

Garden.circle?=?2?*?Math.PI;

Garden.degrad?=?function?(angle)?{

return?Garden.circle?/?360?*?angle;

};

Garden.raddeg?=?function?(angle)?{

return?angle?/?Garden.circle?*?360;

};

Garden.rgba?=?function?(r,?g,?b,?a)?{

return?‘rgba(‘?+?r?+?‘,‘?+?g?+?‘,‘?+?b?+?‘,‘?+?a?+?‘)‘;

};

Garden.randomrgba?=?function?(rmin,?rmax,?gmin,?gmax,?bmin,?bmax,?a)?{

var?r?=?Math.round(Garden.random(rmin,?rmax));

var?g?=?Math.round(Garden.random(gmin,?gmax));

var?b?=?Math.round(Garden.random(bmin,?bmax));

var?limit?=?5;

if?(Math.abs(r?-?g)?<=?limit?&&?Math.abs(g?-?b)?<=?limit?&&?Math.abs(b?-?r)?<=?limit)?{

return?Garden.rgba(rmin,?rmax,?gmin,?gmax,?bmin,?bmax,?a);

}?else?{

return?Garden.rgba(r,?g,?b,?a);

}

};

musics\致愛麗絲.mp3

致愛麗絲--貝多芬

style\style.css

@font-face?{

font-family:?digit;

src:?url(‘digital-7_mono.ttf‘)?format("truetype");

}

ul#wimoban_nav?{

padding-left:50px;

margin-bottom:10px;

border-bottom:2px?solid?#ccc;

overflow:hidden;

_zoom:1;

}

ul#wimoban_nav?li{

float:left;

display:inline;

margin:10px;

}

ul#wimoban_nav?li?a{

display:block;

font-size:16px;

}

ul#wimoban_nav?li?a,#wimoban_p,#wimoban_p?a{

color:#000;

font-family:"微軟雅黑";

}

ul#wimoban_nav?li?a:hover,#wimoban_p?a:hover{

color:red;

}

#wimoban_p{

text-align:center;

font-size:14px;

clear:both;

}

body{

margin:0;

padding:0;

background:#ffe;

font-size:12px;

overflow:auto;

}

#mainDiv{

width:100%;

height:100%;

}

#loveHeart?{

float:left;

width:670px;

height:625px;

}

#garden?{

width:100%;

height:100%;

}

#elapseClock?{

text-align:right;

font-size:18px;

margin-top:10px;

margin-bottom:10px;

}

#words?{

font-family:"sans-serif";

width:500px;

font-size:24px;

color:#666;

}

#messages{

display:none;

}

#elapseClock?.digit?{

font-family:"digit";

font-size:36px;

}

#loveu?{

padding:5px;

font-size:22px;

margin-top:80px;

margin-right:120px;

text-align:right;

display:none;

}

#loveu?.signature?{

margin-top:10px;

font-size:20px;

font-style:italic;

}

#clickSound?{

display:none;

}

#code?{

float:?left;

width:?440px;

height:?400px;

color:?#333;

font-family:?"Consolas",?"Monaco",?"Bitstream?Vera?Sans?Mono",?"Courier?New",?"sans-serif";

font-size:?14px;

}

#code?.string?{

color:#2a36ff;

}

#code?.keyword{

color:#7f0055;

font-weight:bold;

}

#code?.placeholder{

margin-left:15px;

}

#code?.space?{

margin-left:7px;

}

#code?.comments?{

color:?rgb(128,128,192);

}

#copyright?{

margin-top:10px;

text-align:center;

width:100%;

color:#666;

}

#errorMsg?{

width:100%;

text-align:center;

font-size:24px;

position:absolute;

top:100px;

left:0;

}

#copyright?a?{

color:#666;

}

本文由職坐標(biāo)整理發(fā)布，歡迎關(guān)注職坐標(biāo)WEB前端HTML/CSS頻道，獲取更多HTML/CSS知識！

總結(jié)

以上是生活随笔為你收集整理的制作html表白页面,HTML+CSS入门 表白页面实例讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。