動畫字體真棒電池圖標

Question

這是我的第一篇文章。我的問題很簡單：您可以通過在類中添加適當的代碼輕鬆地製作齒輪動畫，是否有一種將電池圖標從空到動的簡單方法？

Answer 1

您可以使用fa-stack重疊兩個字體超棒的圖標。但你必須爲此手動創建一個動畫。對於動畫的電池，你可以試試這個，

<span class="battery"> 
    <i class="fa fa-battery-empty"></i> 
    <i class="fa fa-battery-4 animate"></i> 
    </span> 

有的風格，

.battery{ 
    display: inline-block; 
    position:relative; 
    color:#444; 
} 


.battery .animate{ 
    width:0%; 
    position:absolute; 
    left: 0; 
    top:3px; 
    overflow: hidden; 
    color:#27ae60; 
    z-index: -1; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.5s ease; 
    transition:all 0.5s ease; 
} 

.battery:hover .animate{ 
    width:100%; 
} 

這裏的演示，http://jsbin.com/foruyez/edit?html,css,output

謝謝！