html星空特效代码下载(html5星空特效代码)
求网页的星空背景代码
要完成此效果需要两个步骤
第一步：把如下代码加入到body区域中
script language="JavaScript"
!--
SmallStars = 30;
LargeStars = 10;
SmallYpos = new Array();
SmallXpos = new Array();
LargeYpos = new Array();
LargeXpos = new Array();
Smallspeed= new Array();
Largespeed= new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i SmallStars; i++)
{document.write("LAYER NAME= sn"+i+" LEFT=0 TOP=0 BGCOLOR= #FFFFF0 CLIP= 0,0,1,1 /LAYER")}
for (i = 0; i LargeStars; i++)
{document.write("LAYER NAME= ln"+i+" LEFT=0 TOP=0 BGCOLOR= #FFFFFF CLIP= 0,0,2,2 /LAYER")}
}
else{
document.write( div style="position:absolute;top:0px;left:0px" );
document.write( div style="position:relative" );
for (i = 0; i SmallStars; i++)
{document.write( div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"/div )}
document.write( /div );
document.write( /div );
document.write( div style="position:absolute;top:0px;left:0px" );
document.write( div style="position:relative" );
for (i = 0; i LargeStars; i++)
{document.write( div id="li" style="position:absolute;top:0;left:0;width:2px;height:2px;background:#ffffff;font-size:2px"/div )}
document.write( /div );
document.write( /div );
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
//Inital placement!
for (i=0; i SmallStars; i++)
{
SmallYpos[i] = Math.round(Math.random()*WinHeight);
SmallXpos[i] = Math.round(Math.random()*WinWidth);
Smallspeed[i]= Math.random()*5+1;
}
for (i=0; i LargeStars; i++)
{
LargeYpos[i] = Math.round(Math.random()*WinHeight);
LargeXpos[i] = Math.round(Math.random()*WinWidth);
Largespeed[i]= Math.random()*10+5;
}
function fly(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i LargeStars; i++)
{
LargeXpos[i]-=Largespeed[i];
if (LargeXpos[i] -10)
{
LargeXpos[i]=WinWidth;
LargeYpos[i]=Math.round(Math.random()*WinHeight);
Largespeed[i]=Math.random()*10+5;
}
if (ns){
document.layers[ ln +i].left=LargeXpos[i];
document.layers[ ln +i].top=LargeYpos[i]+hscrll;
}
else{
li[i].style.pixelLeft=LargeXpos[i];
li[i].style.pixelTop=LargeYpos[i]+hscrll;
}
}
for (i=0; i SmallStars; i++)
{
SmallXpos[i]-=Smallspeed[i];
if (SmallXpos[i] -10)
{
SmallXpos[i]=WinWidth;
SmallYpos[i]=Math.round(Math.random()*WinHeight);
Smallspeed[i]=Math.random()*5+1;
}
if (ns){
document.layers[ sn +i].left=SmallXpos[i];
document.layers[ sn +i].top=SmallYpos[i]+hscrll;
}
else{
si[i].style.pixelLeft=SmallXpos[i];
si[i].style.pixelTop=SmallYpos[i]+hscrll;
}
}
setTimeout( fly() ,10);
}
//fly();
//--
/script
第二步：把“onLoad="fly()"”加在body标记里
例如：body onLoad="fly()"
抖音HTML龙卷风特效代码是啥？
!doctype html
html
head
meta http-equiv="Pragma" content="no-cache" /
meta http-equiv="Cache-Control" content="no-cache" /
meta http-equiv="Expires" content="0" /
meta http-equiv="Content-Type" content="text/html;charset=utf-8" /
meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /
style type="text/css"
html{
height: 100%;
}
html,body,ul,li,canvas{
margin: 0;
padding: 0;
}
/style
/head
body bgcolor="#000000"
canvas id="knife"/canvas
/body
script
var canvas = document.getElementById("knife");
canvas.style.position = "absolute" ;
canvas.style.top = 0 ;
var w = window.innerWidth ;
var h = window.innerHeight ;
canvas.width = w ;
canvas.height = h ;
var cxt = canvas.getContext("2d");
cxt.strokeStyle = "#FFF" ;
var list = [];
var G = 0.4 ;//向心加速度
var SPEED_Y = -1 ;//向上速度
var centerLine = w/2 ;//龙卷风中线
function addLine(){
var LEN = 2 ;
for(var i = 0 ;i LEN ; i ++){
list.push({
x:w/2,
y:h/1.3,
g:G,
c:centerLine+2*Math.random(),
sx:(Math.random()-0.5)*4,
sy:SPEED_Y+0.5*(Math.random()-0.5),
len:Math.round(Math.random()*10+5),
list:[{x:w/2,y:h/1.3}]
});
}
}
function step(){
cxt.clearRect(0,0,w,h);
addLine();
var obj ;
for(var i = 0 ; i list.length; i ++){
obj = list[i] ;
if(obj.y h/2.5){//如果超过这个高度，就删除一个点
obj.len -- ;
if(obj.len == 0){
list.splice(i,1);
i -- ;
continue ;
}
}
obj.x += obj.sx ;
obj.y += obj.sy ;
obj.sx += obj.g ;
obj.g = obj.x obj.c ? -G : G ;
obj.list.unshift({x:obj.x,y:obj.y});//记录下质点运动轨迹
obj.list = obj.list.slice(0,obj.len);//仅仅画出其中一段线就好
//画出所有点的连线
cxt.beginPath();
cxt.moveTo(obj.list[0].x,obj.list[0].y);
for(var j = 1 ; j obj.list.length; j ++){
cxt.lineTo(obj.list[j].x,obj.list[j].y);
}
cxt.stroke();
}
requestAnimationFrame(step);
}
requestAnimationFrame(step);
/script
/html
html烟花特效代码
HTML烟花特效代码：//烟花代码//...拓展：网名：小烟花
拓展：小烟花，把烟花的精彩洒满每一个角落，把欢笑传递快乐的每一刻！
html中可以星空的背景吗
可以的
例如下面这段代码
body{
background:?url(图片)?no-repeat?0?0?transparent;
background-size:?200%?auto;//防止图片不够大
}