我想用網頁直接做一個動畫效果，不使用其他任何的工具，直接用記事本，然后用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';??? //設置字體的橫坐標

效果圖如下：

總結

以上是生活随笔為你收集整理的网页动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。