圓形按鈕懸停效果

Question

我發現了一個很好的按鈕效果，我想在我的一個網站中實現。有誰知道我在哪裏可以找到一個（免費）jQuery文件來實現這種效果？這是你看到的第一個效果，這裏的邊界被設置成圓形:)擴大

http://tympanus.net/Development/IconHoverEffects/

Answer 1

上tympanus這個例子是使用CSS3過渡，而不是jQuery插件，這樣你就不會在解決好辦法找你的問題，最好檢查一下如何直接使用CSS3轉換對它進行動畫處理。

編輯：CSS3 tutorial with w3schools

編輯：Another tutorial of CSS-tricks

.icon { 
    background: rgb(0, 0, 0); 
    color: rgb(255, 255, 255); 
    transition: background 0.2s, color 0.2s; 
    -moz-transition: background 0.2s, color 0.2s; 
    -webkit-transition: background 0.2s, color 0.2s; 
} 

.icon:hover { 
    background: rgb(255, 255, 255); 
    color: rgb(0, 0, 0); 
} 

.icon:after { 
    pointer-events: none; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    content: ''; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    top: -7px; 
    left: -7px; 
    padding: 7px; 
    box-shadow: 0 0 0 4px #fff; 
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; 
    -webkit-transform: scale(.8); 
    -moz-transition: -moz-transform 0.2s, opacity 0.2s; 
    -moz-transform: scale(.8); 
    -ms-transform: scale(.8); 
    transition: transform 0.2s, opacity 0.2s; 
    transform: scale(.8); 
    opacity: 0; 
} 

.icon:hover:after { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
} 

我添加使用的規則：僞元素之後，顯示外部圈！有關信息，圖標本身正在使用：before僞元素，並帶有一個圖標字體，如font-awesome

Answer 2

本示例不使用jquery，它是所有的CSS（就像tympanus上的大多數東西一樣）。

您將需要去掉CSS並將其應用於您自己的ID /類。或者您可以使用他們的CSS文件&使用與他們使用的相同的類，但可能存在與您網站上的其他樣式相沖突的內容。