我想用網(wǎng)頁直接做一個(gè)動畫效果，不使用其他任何的工具，直接用記事本，然后用html，css和javascript之間的關(guān)系制作一個(gè)ppt放映時(shí)的動畫效果，該效果是關(guān)于介紹沈陽師范大學(xué)軟件學(xué)院學(xué)生會文藝部的。因?yàn)榘衘avascript的腳本，所以有很多瀏覽器不支持，所以最好使用IE瀏覽器觀看。

具體的可以下載我的源碼進(jìn)行查看：http://download.csdn.net/detail/a1217158716/9828130

一、重要實(shí)現(xiàn)的代碼和截圖

1.?背景的雪花飄落效果

重要的代碼如下：

（1）該代碼是用于生成多個(gè)雪花的。

????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）生成雪花隨機(jī)在屏幕上飄動的坐標(biāo)。

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

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

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

?

（4）讓雪花按一定時(shí)間改變其坐標(biāo)位置，實(shí)現(xiàn)雪花飄動的效果。

????setTimeout('snow()',40);

（5）效果圖如下：

2.開始的倒計(jì)時(shí)的效果

重要的代碼如下：

（1）生成一個(gè)圓，其中有數(shù)字的效果

??????<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）倒計(jì)時(shí)的效果，圓中的數(shù)字按照一定的時(shí)間改變即可實(shí)現(xiàn)倒計(jì)時(shí)的效果

?????id=setInterval("test1()",1000);????????????????? //1秒執(zhí)行函數(shù)

?????document.getElementById("t1").innerText=m;???? //改變圓中的數(shù)字

?（3）效果圖如下：

3.四朵花拉開一個(gè)矩形框的效果（該效果主要是通過改變矩形框的大小和其坐標(biāo)來實(shí)現(xiàn)的。）

重要的代碼如下：

document.getElementById("t0").style.width=m;???? //改變矩形的寬度

document.getElementById("t0").style.height=m;???? //改變矩形的高度??

document.getElementById("t0").style.left=500+150-shen;??? //改變矩形的橫坐標(biāo)

document.getElementById("t0").style.top=150+150-shen;??? //改變矩形的縱坐標(biāo)

效果圖如下：

4.實(shí)現(xiàn)一個(gè)大方塊邊緣有小方塊的效果（可以改變邊緣圖片的顯示類型即可出現(xiàn)此效果）

重要的代碼如下：

document.getElementById("tt1").style.display="block";???? //設(shè)置圖片可見

document.getElementById("t2").style.display="none";????? //設(shè)置圖片不可見

效果圖如下：

5.實(shí)現(xiàn)移動效果（該變圖片的寬度和小方塊的坐標(biāo)即可實(shí)現(xiàn)）

重要的代碼如下：

document.getElementById("fuwu").style.opacity=0.07*shen12;??? //使用濾鏡實(shí)現(xiàn)透明效果

document.getElementById("fuwu1").style.width=shen12*7;???? //改變圖片的寬度

document.getElementById("fuwu").style.left=640-shen12*7/2;?? //改變圖片的橫坐標(biāo)

document.getElementById("fuwu").style.top=280-shen12*7/2;?? //改變圖片的縱坐標(biāo)

效果圖如下：

6.實(shí)現(xiàn)字體的進(jìn)入效果（通過該變字體的大小和其縱坐標(biāo)姐實(shí)現(xiàn)）

重要的代碼如下：

document.getElementById("object"+shen17).style.top=200+(shen16)*2;? //改變字體的縱坐標(biāo)

document.getElementById("object"+shen17).style.left=535+(shen16)*2;? //改變字體的橫坐標(biāo)

document.getElementById("object"+shen17).style.fontSize=200-(shen16)*6;//改變字體的大小

效果圖如下：

7.實(shí)現(xiàn)文字繞中心旋轉(zhuǎn)（用數(shù)學(xué)的三角函數(shù)實(shí)現(xiàn)）

重要的代碼如下：

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)));???? //縱坐標(biāo)的隨機(jī)改變算法

?

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)));???? //橫坐標(biāo)改變算法

效果圖如下：

8.實(shí)現(xiàn)文字向中心移動的效果（通過三角函數(shù)來定位器坐標(biāo)）

重要的代碼如下：

cosDeg = Math.cos(angle * Math.PI /180);??? //隨機(jī)獲得坐標(biāo)值

sinDeg = Math.sin(angle * Math.PI /180);??? //隨機(jī)獲得坐標(biāo)值

target.style.top = (orginH -target.offsetHeight) / 2 + 'px';?? //設(shè)置字體的縱坐標(biāo)

target.style.left = (orginW -target.offsetWidth) / 2 + 'px';??? //設(shè)置字體的橫坐標(biāo)

效果圖如下：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。