平滑的CSS在懸停上旋轉動畫

我創建了一個按鈕，我希望它在鼠標懸停時旋轉360度，並在懸停時旋轉背景詞360deg。到目前爲止，它工作得很好，但如果你用鼠標慢慢走向它，它會閃爍。平滑的CSS在懸停上旋轉動畫

下面的代碼的短版：

.btn { 
 
\t display: block; 
 
\t margin: 60px auto; 
 
\t width: 250px; 
 
\t padding: 15px; \t 
 
\t position: relative; \t 
 

 
\t color: #3498db; 
 
\t font-weight: 300; 
 
\t font-size: 24px; 
 
\t text-decoration: none; 
 
\t \t \t 
 
\t border: 5px solid #3498db; 
 
\t \t \t \t \t 
 
\t transform: rotate(360deg); 
 
\t transition: all 0.5s; 
 
\t transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); 
 
} 
 

 
.btn-rotate:hover { 
 
\t transform: rotate(0deg); 
 
\t transition-delay: 0; 
 
\t transition: all 0.5s; 
 
}

<a href="#" class="btn btn-rotate">I am a button!</a>

爲完整的代碼，檢查codpen演示http://codepen.io/andornagy/pen/ojBNZx

來源

2015-09-29 Andor Nagy

這是因爲當你旋轉它時，你不再徘徊， –

如果你想讓按鈕一旦完成它的動畫，就需要使用jQuery（或純Javascript） - 如果這是一個選項 - 告訴我們... – Chris

這裏就是它增加了只有當你徘徊在一個額外的僞元素的想法：

Demo

.btn:after { 
    content: ''; 
    width: 300px; 
    height: 150px; 
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    border-radius: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

.btn:hover:after { 
    display: block; 
}

給它一點背景知識顏色，只是這樣才能更好地看到發生了什麼......

對於大多數控制，我會訴諸一些JavaScript。

來源

2015-09-29 12:00:36 Shikkediel

閃爍問題，是因爲發生的事情，當你將鼠標懸停在元素，元素開始旋轉。在旋轉一些x度之後，該元素將旋轉到一定程度，並且鼠標/光標不再在元素上。這是閃爍發生的原因。

與上面的比較，我覺得使用包裝（div）並分析了我們可能需要多少寬度，我們將其設置爲div。在div：hover元素上，我們可以執行轉換。與現在相比，它提供了更好的結果。

這裏是fiddle

.buttonHolder { 
    padding: 50px; 
} 

.buttonHolder:hover .btn-rotate { 
    transform: rotate(360deg); 
    transition-delay: 0; 
    transition: all 0.6s; 
}

來源

2015-09-29 11:42:11 rajuGT

平滑的CSS在懸停上旋轉動畫

回答

相關問題