仿google首页的动画按钮-优快云博客

本文分享了一个仿制Google首页动画按钮的实现案例。通过HTML、CSS和JavaScript，作者尝试复现了Google按钮的悬停动画效果，并提供了源代码供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近闲来无事，自己实现了下google首页的动画按钮，但是效果和google的差很多，大家看看，这个应该怎么实现好？代码在附件中，大家研究下。

<html>
<head>
<style type="text/css"> 
        label {display:block; float:left; width:50px;height:37px;background-image:url(toolbar.png);} 
        .a {background-position-y:0px} 
        .b {background-position-y:-37px} 
        .c {background-position-y:-74px} 
        .d {background-position-y:-111px} 
        .e {background-position-y:-148px} 
        .f {background-position-y:-185px} 
        .g {background-position-y:-222px} 
        .f1 {background-position-x:0px} 
        .f2 {background-position-x:-51px} 
        .f3 {background-position-x:-101px} 
        .f4 {background-position-x:-153px} 
        .f5 {background-position-x:-205px} 
        .f6 {background-position-x:-257px} 
        .f7 {background-position-x:-309px} 
</style>

<script language = "JavaScript">
var speed=70;
var num=[1,1,1,1,1,1,1,1];
var curpic="";
var yname=['','a','b','c','d','e','f','g'];
var timer=new Array(8);
	//仿google图片悬停动画
	function num_up(){
		//clearTimeout(timer[curpic]);
		eval("document.getElementById('pic"+curpic+"').className='"+yname[curpic]+" f"+num[curpic]+"'");
		if(num[curpic]>=5){
			clearTimeout(timer[curpic]);
			return;
		}
		num[curpic]++;
		timer[curpic]=setTimeout(num_up,speed);
	}

	function num_down(){
		for(i=1;i<timer.length;i++){
			if(i==curpic)
				clearTimeout(timer[i]);
			eval("document.getElementById('pic"+i+"').className='"+yname[i]+" f"+num[i]+"'");
			if(num[i]<=1){
				clearTimeout(timer[i]);
				continue;
			}
			num[i]--;
			timer[i]=setTimeout(num_down,speed);
		}
	}
</script>
</head>

<body>
<label id="pic1" class="a f1" onmouseover="curpic='1';num_up();" onmouseout="curpic='1';num_down();"></label>
<label id="pic2" class="b f1" onmouseover="curpic='2';num_up();" onmouseout="curpic='2';num_down();"></label>
<label id="pic3" class="c f1" onmouseover="curpic='3';num_up();" onmouseout="curpic='3';num_down();"></label>
<label id="pic4" class="d f1" onmouseover="curpic='4';num_up();" onmouseout="curpic='4';num_down();"></label>
<label id="pic5" class="e f1" onmouseover="curpic='5';num_up();" onmouseout="curpic='5';num_down();"></label>
<label id="pic6" class="f f1" onmouseover="curpic='6';num_up();" onmouseout="curpic='6';num_down();"></label>
<label id="pic7" class="g f1" onmouseover="curpic='7';num_up();" onmouseout="curpic='7';num_down();"></label>
</body>
</html>