我想用網頁直接做一個動畫效果，不使用其他任何的工具，直接用記事本，然後用html，css和javascript之間的關係製作一個ppt放映時的動畫效果，該效果是關於介紹瀋陽師範大學軟件學院學生會文藝部的。因爲包含有javascript的腳本，所以有很多瀏覽器不支持，所以最好使用IE瀏覽器觀看。
具體的可以下載我的源碼進行查看：http://download.csdn.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'; //設置字體的橫座標
效果圖如下：
