javascript - 如何使随机文本在悬停在按钮上时旋转，就像 google "I am feeling lucky button"一样，谁能帮我？

Question

我正在搜索一些关于悬停在按钮上的随机文本旋转的资源，并以新文本停止。就像谷歌的“我感觉很幸运”按钮一样有效。 https://www.google.com/谁能帮我做这样的事情？

问候

Answer 1

$('#hvrButton').hover(function() {
  $('#hvrButton').val("I am Very Happy");
});

.btnCustom {
  width: 150px;
  padding: 10px;
  background-color: #03A9F4;
  color: white;
}

.btnCustom:hover {
  width: 150px;
  padding: 10px;
  background-color: #0425f9;
  color: white;
  font-family: cursive;
  -webkit-animation-name: btnRotate;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s;
  /* Safari 4.0 - 8.0 */
}

@-webkit-keyframes btnRotate {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="hvrButton" type="button" value="I am feeling lucky" class="btnCustom" />