怎样给网页添加开场动画

html-css018

怎样给网页添加开场动画,第1张

只需增加一段代码就可以轻松的给自己的论坛(网站)增加一个类似于QQ空间那样的开场动画。

打开页面即出现一个FLASH,然后此FLASH慢慢消失。

脚本说明:

把如下代码加入<body>区域中

<script>

<!--

lstart=0

loop=true

speed=85

pr_step=3

newspeed=800

newspeed2=0

function makeObj(obj,nest){

nest=(!nest) ? '':'document.'+nest+'.'

this.css=(document.layers) ? eval(nest+'document.'+obj):eval(obj+'.style')

this.scrollHeight=(document.layers) ?

this.css.document.height:eval(obj+'.offsetHeight')

this.scrollWidth=(document.layers) ?

this.css.document.width:eval(obj+'.offsetWidth')

this.up=goUp

this.obj = obj + "Object"

eval(this.obj + "=this")

return this

}

function goUp(speed){

if(parseInt(this.css.top)>-(this.scrollHeight-0)){

this.css.top=parseInt(this.css.top)-pr_step-1

//alert("ok")

setTimeout(this.obj+".up("+speed+")",35)

}else {

if(navigator.appName == "Netscape")

{

tome=setInterval(this.obj+".setClipne()",50)}

else{

tome=setInterval('setClipie()',50)

tmp=divCont.style.clip

}

}

}

function setClipne(){

//this.css.clip.right=this.css.clip.right-pr_step

//this.css.clip.left=this.css.clip.left+pr_step

//temp=parseInt(this.css.clip.right)-parseInt(this.css.clip.left)

if(temp==0)

{clearInterval(tome)<br>document.divCont.document.divNews.visibility="hide"<br>document.divCont.visibility="hide"<br>}

}

function setClipie()

{

newspeed=newspeed-pr_step

newspeed2=newspeed2+pr_step

temp="rect(0px "+newspeed+"px 600px "+newspeed2+"px)"

this.css.clip=temp

if(newspeed<newspeed2)

{

clearInterval(tome)

divNews.style.display="none"

divCont.style.display="none"

}

}

function slideInit(){

oSlide=makeObj('divNews','divCont')

oSlide.css.top=lstart

oSlide.up(speed)

}

function myload(){

setTimeout("slideInit()",4000)

}

myload()

//-->

</script>

<script language=javascript>

document.write("<div id=divAll style='position:absolute'><div id=divCont style='position:absolutewidth:386height:60top:0left:-12clip:rect(0,800,600,0)'><div id=divNews style='position:absolutetop:0left:10right:820'><embed src=XXX.swf qulity=high width=602 height=525 onload=myload ></embed></div></div></div>")

</script><script language=javascript>

{

if (navigator.appName == "Netscape")

{document.write("<layer id=divCont onLoad='moveToAbsolute(layer1.pageX-160,layer1.pageY)clip.height=600clip.width=800visibility=\"show\"'><layer id=divNews position:absolutetop:0left:0><embed src=XXX.swf qulity=high width=602 height=25></embed></layer></layer>")<br>}

}

</script>

自行修改颜色标记处

创建动画序列,需要使用animation属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现,具体情况参见使用keyframes定义动画序列小节部分。

transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。

当我们给元素添加Animation后,动画总是现在元素的初始位置显示一下,然后再跳到动画的起始位置播放,这样的话会很难看。

解决方法:

使用animation-fill-mode:forwards属性

forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置

backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置

上边样式的将变现为,class为phone的元素会在加载完成后,从它的定义位置靠下5rem开始动画。

js中赋值nimation-fill-mode:forwards的方法:

object .style.animationFillMode=none | forwards | backwards | both