[转载] 利用css制作电视雪花屏特效

html-css078

[转载] 利用css制作电视雪花屏特效,第1张

打开PS，新建一张图片（这里选择设置图片像素大小为400x400)。设置图片背景色为黑色，点确定。

选择添加杂色滤镜

调节数量为120，选择高斯分布，勾选单色，点确定。（数量指的是该滤镜添加的杂色数量，原本背景为黑色，数量越大越多杂色会替换掉黑色。在勾选单色的情况下，可以理解成数量越大对比度越高）

按下键盘 Alt+Shift+Ctrl+S 将图片保存为Web格式，选择保存图片类型为JPEG，点击储存。

利用动画效果来模拟电视雪花屏的特效

不行 因为层的位置不同 用css做的飘动的图片 只能 在字的背面 而不能 覆盖字

如果需要css的话 这个

body{background:url(图片地址) repeat}

图片是飘动的带球衣、雪花的透明图

这个代码生成的飘动的图片 遇到文字会被挡住

<html>

<head>

<title>网页特效|Linkweb.cn/Js|---页面漫天飞雪</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

</head>

<body bgcolor="#000000" onLoad="snow()">

<script language="JavaScript">

<!--

N = 40

Y = new Array()

X = new Array()

S = new Array()

A = new Array()

B = new Array()

M = new Array()

V = (document.layers)?1:0

iH=(document.layers)?window.innerHeight:window.document.body.clientHeight

iW=(document.layers)?window.innerWidth:window.document.body.clientWidth

for (i=0i <Ni++){

Y[i]=Math.round(Math.random()*iH)

X[i]=Math.round(Math.random()*iW)

S[i]=Math.round(Math.random()*5+2)

A[i]=0

B[i]=Math.random()*0.1+0.1

M[i]=Math.round(Math.random()*1+1)

}

if (V){

for (i = 0i <Ni++)

{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}

}

else{

document.write('<div style="position:absolutetop:0pxleft:0px">')

document.write('<div style="position:relative">')

for (i = 0i <Ni++)

{document.write('<div id="si" style="position:absolutetop:0left:0width:'+M[i]+'height:'+M[i]+'background:#fffff0font-size:'+M[i]+'"></div>')}

document.write('</div></div>')

}

function snow(){

var H=(document.layers)?window.innerHeight:window.document.body.clientHeight

var W=(document.layers)?window.innerWidth:window.document.body.clientWidth

var T=(document.layers)?window.pageYOffset:document.body.scrollTop

var L=(document.layers)?window.pageXOffset:document.body.scrollLeft

for (i=0i <Ni++){

sy=S[i]*Math.sin(90*Math.PI/180)

sx=S[i]*Math.cos(A[i])

Y[i]+=sy

X[i]+=sx

if (Y[i] >H){

Y[i]=-10

X[i]=Math.round(Math.random()*W)

M[i]=Math.round(Math.random()*1+1)

S[i]=Math.round(Math.random()*5+2)

}

if (V){document.layers['sn'+i].left=X[i]document.layers['sn'+i].top=Y[i]+T}

else{si[i].style.pixelLeft=X[i]si[i].style.pixelTop=Y[i]+T}

A[i]+=B[i]

}

setTimeout('snow()',10)

}

//-->

</script>

<script language="Javascript">

<!--

function selectAll(theField){

var tempval=eval("document."+theField)

tempval.focus()

tempval.select()

}

//-->

</script>

</table>

</body>