萬盛學電腦網 >> 網頁制作 >> Html5 >> html禮花背景代碼分析
html禮花背景代碼分析
大家知道html禮花背景代碼嗎?對於HTML技術來說，Canvas應用非常廣泛，基本上所有HTML5動畫特效都會用到Canvas特性。我們只需在黑色的畫布上點擊鼠標，即會有漂亮的煙花綻放在夜空當中。
<html>
<head>
<title>網頁特效禮花背景</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body bgColor="#000000">
<LAYER clip="0,0,1,1" bgcolor="#ffffff" visibility="show" top="10" left="10" name="a0">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#fff000" visibility="show" top="10" left="10" name="a1">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#ffa000" visibility="show" top="10" left="10" name="a2">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#ff00ff" visibility="show" top="10" left="10" name="a3">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#00ff00" visibility="show" top="10" left="10" name="a4">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#ff00ff" visibility="show" top="10" left="10" name="a5">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#ff0000" visibility="show" top="10" left="10" name="a6">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#ffffff" visibility="show" top="10" left="10" name="a7">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#fff000" visibility="show" top="10" left="10" name="a8">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#ffa000" visibility="show" top="10" left="10" name="a9">
</LAYER>
<LAYER clip="0,0,1,1" bgcolor="#ff00ff" visibility="show" top="10" left="10" name="a10">
</LAYER>
<LAYER clip="0,0,2,2" bgcolor="#00ff00" visibility="show" top="10" left="10" name="a11">
</LAYER>
<LAYER clip="0,0,2,2" bgcolor="#0000ff" visibility="show" top="10" left="10" name="a12">
</LAYER>
<LAYER clip="0,0,2,2" bgcolor="#ff0000" visibility="show" top="10" left="10" name="a13">
</LAYER>
<div id="starsDiv" style="LEFT: 0px; POSITION: absolute; TOP: 0px"><div
style="BACKGROUND: #ffffff; FONT-SIZE: 2px; HEIGHT: 2px; POSITION: relative; WIDTH: 2px"></div><div
style="BACKGROUND: #fff000; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ffa000; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ff00ff; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #00ff00; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #0000ff; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ff0000; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ffffff; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #fff000; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ffa000; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ff00ff; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ff00ff; FONT-SIZE: 2px; HEIGHT: 2px; POSITION: relative; WIDTH: 2px"></div><div
style="BACKGROUND: #0000ff; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div><div
style="BACKGROUND: #ff0000; FONT-SIZE: 1px; HEIGHT: 1px; POSITION: relative; WIDTH: 1px"></div></div><script
language="JavaScript">
<!-- Begin
var Clrs = new Array(9);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'ffa500';
Clrs[5] = 'ffff00';
Clrs[6] = '00ff00';
Clrs[7] = 'ffffff';
Clrs[8] = 'fffff0';
var sClrs = new Array(5);
sClrs[0] = 'ffa500';
sClrs[1] = '55ff66';
sClrs[2] = 'AC9DFC';
sClrs[3] = 'fff000';
sClrs[4] = 'fffff0';
var yBase;
var xBase;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var initialStarColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function Fireworks() {
if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else if (document.layers) {
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}
if (document.all) {
step = 5;
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
starsDiv.all[i].style.background=initialStarColor;
if (currStep > 90)
starsDiv.all[i].style.background=Clrs[c];
starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
}
}
else if (document.layers) {
step = 5;
for ( j = 0 ; j < 24 ; j++ ) { //number of NS layers!
var templayer = "a"+j;
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
document.layers[templayer].bgColor=initialStarColor;
if (currStep > 90)
document.layers[templayer].bgColor=Clrs[c];
document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
}
}
currStep+= step;
T=setTimeout("Fireworks()",5);
if (currStep == 220) {
currStep = -10;
for (n = 0; n < sClrs.length; n++) {
var k = Math.round(Math.random()*n);
}
initialStarColor = sClrs[k];
if (document.all) {
Dtop = window.document.body.clientHeight - 250;
Dleft = xBase * 3.5;
Mtop = Math.round(Math.random()*Dtop);
Mleft = Math.round(Math.random()*Dleft);
document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
}
else if (document.layers) {
Dleft = window.innerWidth - 100;
Dtop = window.innerHeight - 100;
Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
document.layers[templayer].top = Mtop;
document.layers[templayer].left = Mleft;
}
if ((Mtop < 20) || (Mleft < 20)) {
Mtop += 90;
Mleft += 90;
}
}
}
Fireworks();
// End -->
</script>
</body>
</html>
相信大家已經了解html禮花背景代碼了吧!感謝大家對我們網站的支持!
相關推薦：
html斜向移動落葉背景代碼
想了解更多關於html語言，請點擊精品學習網編程開發欄目！！
- 上一頁:html下雨效果代碼解析
- 下一頁:html斜向移動落葉背景代碼
