如何通過CSS3

Question

，使與HTML5我標籤的圖標自旋這是我的HTML代碼

<div class='form-group col-xs-12 col-sm-5 col-md-5'> 
    <label for='captcha-code'>Captcha Code: </label> 
    <span id='captcha-text'></span> 
    <i class='captcha-refresh icon-spinner9 pointer'></i> 
</div> 

我使用icomoons作爲顯示的圖標。我試圖做到的，是當一個人點擊該<i class='captcha-refresh icon-spinner9 pointer'></i>我希望它像旋轉的裝載機，使我們能夠證明的東西正在處理我已經嘗試了許多CSS3過渡。所有這些過渡僅被應用到div標籤，而不是i標籤。

請問任何人都可以提供解決方案嗎？提前致謝。

Answer 1

使用可以使用簡單的CSS keyframes輕鬆實現此目的。我創建了一個名爲icn-spinner的類，假設它將包含圖標。這個類有動畫icn-spinner，將旋轉2次。如果你願意，你可以使它無限。只需將2替換爲關鍵字infinite即可。

$(document).ready(function() { 
 
    $('.js-spin').click(function() { 
 
    $(this).addClass('icn-spinner') //remove class to stop animation 
 
    }); 
 
});

i { 
 
    font-size: 40px; 
 
} 
 

 
.icn-spinner { 
 
    animation: spin-animation 0.5s infinite; 
 
    display: inline-block; 
 
} 
 

 
@keyframes spin-animation { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(359deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<i class="js-spin"> ♠ Click </i>