如何讓一個隨機文本旋轉在按鈕上的懸停，就像谷歌「我感覺幸運按鈕」的作品任何人都可以幫助我？

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" />