鼠标的跳动文字

关注

原创最新推荐文章于 2026-07-05 12:24:33 发布 499 阅读 AI 写同款· GEO 优化 ›

css文字跳动 css文字跳动要做的效果如下：鼠标移入文字挨个跳动! 先看看HTML，先是span标签包裹着字母，然后是div标签包裹所有的span标签，接着看span标签上style上的–i，不理解的你们可以把他看做为一个变量，里面存放数值，数值大小从小到大；至于具体的的作用往下看这一段把主要内容-字母居中，以及一些基本样式下面才是重点，基本样式跳过介绍，给div中所有span设置样式， text-transform: uppercase;给字母设置大写； animation: animate 2s eas 阅读详情

<html>
<body> <SCRIPT language=javascript>
<!--//This is a JS program for Sword Jin's JoyFM homepage.All rights reserved.
var cx=0;
var cy=0;
var val=0;
function locate()
{ cx=window.event.x;
cy=window.event.y;

}
document.onmousemove=locate;
function follow(i)
{ var x;
if(i<4)x=cx-50+i*10;
else x=cx-25+i*10;
var y=cy-20+Math.floor(Math.random()*40);
w=eval("word"+i);
with(w.style)
{
left=x.toString()+"px";
top=y.toString()+"px";
}
}
function show(i)
{
var w=eval("word"+i);
with(w.style)
{
visibility="visible";
s=parseInt(fontSize);
if(s>=200)s-=100;
else if(s>90&&s<=100)
  {
  s-=85;
  clearInterval(val);
  if(i<5)val=setInterval("show("+(i+1)+")",20);
  }
fontSize=s;
}

}
function start()
{ for(i=1;i<=5;i++)
{
val=setInterval("show(1)",20);
setInterval("follow("+i+")",100);

}
}

//-->
</SCRIPT><SCRIPT language=javascript>
var word=new Array(5);
word[1]="嗨";word[2]="!";word[3]="大";word[4]="家";word[5]="好";
for(i=1;i<=5;i++)
document.write("<div id='word"+i+"' style='width:20px;height:20px;position:absolute;font-size:1000;visibility:hidden'><font face='Forte' color='#00FF00'>"+word[i]+"</font></div>");start();

</SCRIPT>
</body>
</html>