Question

转到谷歌，没有输入任何内容，将鼠标悬停在“我很幸运”按钮上。看看它做了什么？

我想不出怎么做...... on：hover ....但实际内容和动画本身如何？

Answer 1

这不是动画的按钮。

他们有一个隐藏的div，位于按钮上方。它绝对定位。它包含很多包含所有消息的跨度。

在悬停时，它们使用一个函数来移动该div，并使其可见。看起来按钮的内容正在移动，但它们并不是真的。

<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
  <div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
    <!-- spans go here -->
  </div>
</div>

看到值，-29px？这一切都在改变。

Answer 2

为边框和粗体添加一个类，即：focus，并使用jQuery切换它：

$('#button').hover( function () {
  $(this).addClass('focus');
}, function () {     
  $(this).removeClass('focus');
} );

您可以看到Google与Chrome一起使用的实际规则是：

.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
  -webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
  box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
  box-shadow:0 1px 1px rgba(0,0,0,.1)
}

如何设置按钮内容的动画？

2 个答案: