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

Question

转到 google，无需输入任何内容，将鼠标悬停在“手气不错”按钮上。看看它做了什么？

我想不出该怎么做...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？这就是所有正在改变的。