CSS主页面中怎么加雪花飘落效果代码

html-css013

CSS主页面中怎么加雪花飘落效果代码,第1张

<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>

引导层动画是指沿着某种轨迹运动的动画,这种动画类型制作起来至少需要两个图层,一个用来绘制路径的引导层,一个是运动对象的图层。

1、启动Flash,新建一个Flash文档,进入工作区,首先导入两张图片(背景和雪花),点击“文件”|“导入”|“导入到库”,选择要导入的两张图片。

2、把“雪”拖动到舞台上,右键“雪”,在下拉菜单中选择“转换为元件”。在弹出“转换为元件”对话框中,选择“影片剪辑”。点击“确定”。

3、在时间轴上,将图层1重命名为“雪”,点击添加引导层按钮。

4、在时间轴上,点击新建图层按钮,再把背景也拖动到舞台上,并修改图层3为“背景”。

5、选中引导层,开始编辑引导层。工具栏中选择铅笔按钮。

6、用铅笔在舞台上画一段曲线,即雪花的运动轨迹。

7、调整各图层位置,确认选项中的磁铁按钮激活状态下,把雪花的中心与轨迹线的下端点对齐。

8、在时间轴上,给雪花图层的第50帧处插入关键帧,其余两个图层的50帧处插入普通帧。

9、编辑雪花图层的第50帧,选中它。将舞台上的雪花拖动到轨迹线的下端,保证中心点与下端点对齐。

10、选中雪花层中1到50帧中的任意一帧,在属性检查器中,补间栏里选择“动画”。

11、再次选择雪花图层中1到50帧之间的任意帧。在属性检查器的“调整到路径”的复选框选中。

12、此时基本完成,先发布预览一下。可看见雪沿着轨迹飞翔,达到预期效果,OK完成。可以导出影片了。

注意:1、雪花的中心与端点对齐,并且磁铁按钮被激活。否则,雪花不会沿着引导层绘制的轨迹运动。

2、可使雪花沿着轨迹线做相切的运动,这样使动画更加符合运动规律。

用flash引导线制作雪花飘落的动画教程

在 Flash 中利用引导线制作雪花飘飘动画。 这种方法最笨但也效果最好,就是用引导线功能,让雪花不停的飘呀飘,如果多用几个图层,效果更好。

1、新建一个flash影片。设背景为“黑色”,其他的用默认值。

2、按ctrl+f8新建一个组件,类型为“影片剪辑”,命名为“雪花”。在它的正中用“铅笔”工具画一个不规则的多边形,然后用“颜料桶工具”将它填上白色。(如图1-1所示)

3、再用ctrl+f8建一个组件,类型为“影片剪辑”,命名为“前层”。

4、将组件“雪花”拖到其中,用“选定工具”中的“比例”功能把它缩小(小技巧:先用“放大镜”将它放大,然后再用“比例”功能,可缩得更小)。在第80帧上“插入关键帧”,在“图层1”上用鼠标右键的“添加引导线”功能(见图1-2)。

在新增加的“引导线:图层1”的第1帧上,从“雪花”开始,画一条弯曲的曲线。将第80帧上的“雪花”沿曲线从头拖到曲线的末尾。然后在“图层1”的第1帧上点鼠标右键,选“创见动画动作”功能,见图1-3。

5、第4步是制作一片雪花,下雪不是只下一片的吧。插入图层,将第4步重复做10次。做好后的效果见图1-4。

 

6、把第3至5步重复做两次,不同之处是组件的命名分别为“中层”和“后层”。“雪花”的大小和“引导线”的路径不要一样。这是为了多做几个图层,看起来效果细腻一点。

7、现在回到场景1中,插入6个图层,分别命名为“后层1”、“后层2”、“中层1”、“中层2”、“中层3”、“中层4”、“前层1”、“前层2”。在对应的层上拖入对应的组件,并适当的调整时间轴,让雪花飘得连贯起来。见图1-5。

按ctrl+enter就可以看到效果了。

(这种方法简单且效果好,主要是用“引导线”功能,让雪花不停的飘下,多用几个图层效果会更好)