网页动画效果
我想用网页直接做一个动画效果，不使用其他任何的工具，直接用记事本，然后用html，css和javascript之间的关系制作一个ppt放映时的动画效果，该效果是关于介绍沈阳师范大学软件学院学生会文艺部的。因为包含有javascript的脚本，所以有很多浏览器不支持，所以最好使用IE浏览器观看。
具体的可以下载我的源码进行查看：http://download.****.net/detail/a1217158716/9828130
一、重要实现的代码和截图
1. 背景的雪花飘落效果
重要的代码如下：
（1）该代码是用于生成多个雪花的。
document.write('<div style="position:absolute;top:0px;left:0px;z-index:1">');
document.write('<div style="position:relative;z-index:1">');
for (i = 0; i < N; i++)
{
document.write('<divid="si”style="position:absolute;z-index:1;top:0;left:0;width:'
+M[i]+';height:'+M[i]+';font-size:'+M[i]+'">
<font color=white size=3face="Wingdings">T</font></div>')
}
document.write('</div></div>');
（2）获得浏览器的长度和宽度。
varH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
（3）生成雪花随机在屏幕上飘动的坐标。
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+7);
S[i]=Math.round(Math.random()*5+2);
（4）让雪花按一定时间改变其坐标位置，实现雪花飘动的效果。
setTimeout('snow()',40);
（5）效果图如下：2.开始的倒计时的效果
重要的代码如下：
（1）生成一个圆，其中有数字的效果
<div id="t0" style=" width:200px; height:200px;background-color:gray; border-radius:250px;position:fixed;left:500px;top:150px">
<span id="t1" style="font-size:100px;height:200px;line-height:200px; display:block; color:#FFF;text-align:center">10</span></div>
（2）倒计时的效果，圆中的数字按照一定的时间改变即可实现倒计时的效果
id=setInterval("test1()",1000); //1秒执行函数
document.getElementById("t1").innerText=m; //改变圆中的数字
（3）效果图如下：
3.四朵花拉开一个矩形框的效果（该效果主要是通过改变矩形框的大小和其坐标来实现的。）
重要的代码如下：
document.getElementById("t0").style.width=m; //改变矩形的宽度
document.getElementById("t0").style.height=m; //改变矩形的高度
document.getElementById("t0").style.left=500+150-shen; //改变矩形的横坐标
document.getElementById("t0").style.top=150+150-shen; //改变矩形的纵坐标
效果图如下：
4.实现一个大方块边缘有小方块的效果（可以改变边缘图片的显示类型即可出现此效果）
重要的代码如下：
document.getElementById("tt1").style.display="block"; //设置图片可见
document.getElementById("t2").style.display="none"; //设置图片不可见
效果图如下：
5.实现移动效果（该变图片的宽度和小方块的坐标即可实现）
重要的代码如下：
document.getElementById("fuwu").style.opacity=0.07*shen12; //使用滤镜实现透明效果
document.getElementById("fuwu1").style.width=shen12*7; //改变图片的宽度
document.getElementById("fuwu").style.left=640-shen12*7/2; //改变图片的横坐标
document.getElementById("fuwu").style.top=280-shen12*7/2; //改变图片的纵坐标
效果图如下：
6.实现字体的进入效果（通过该变字体的大小和其纵坐标姐实现）
重要的代码如下：
document.getElementById("object"+shen17).style.top=200+(shen16)*2; //改变字体的纵坐标
document.getElementById("object"+shen17).style.left=535+(shen16)*2; //改变字体的横坐标
document.getElementById("object"+shen17).style.fontSize=200-(shen16)*6;//改变字体的大小
效果图如下：
7.实现文字绕中心旋转（用数学的三角函数实现）
重要的代码如下：
objectX="object"+jt
eval(dS + objectX +sD + v + (Yt +Math.cos((20*Math.sin(inct/20))+jt*70)*yt*(Math.sin(10+inct/10)+0.2)*Math.cos((inct+ jt*25)/10))); //纵坐标的随机改变算法
eval(dS + objectX + sD + ht + (Xt +Math.sin((20*Math.sin(inct/20))+jt*70)*xt*(Math.sin(10+inct/10)+0.2)*Math.cos((inct+ jt*25)/10))); //横坐标改变算法
效果图如下：
8.实现文字向中心移动的效果（通过三角函数来定位器坐标）
重要的代码如下：
cosDeg = Math.cos(angle * Math.PI /180); //随机获得坐标值
sinDeg = Math.sin(angle * Math.PI /180); //随机获得坐标值
target.style.top = (orginH -target.offsetHeight) / 2 + 'px'; //设置字体的纵坐标
target.style.left = (orginW -target.offsetWidth) / 2 + 'px'; //设置字体的横坐标
效果图如下：