打开页面即出现一个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