動畫字體真棒電池圖標

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

2016-07-30 Gef

我很驚訝我的帖子收到-1。我的帖子中有什麼不清楚的地方？這是一個相當簡單的問題：班級代碼允許動畫一些圖標。我想知道電池圖標是否可以通過班級代碼進行自我動畫。看來答案是否定的。感謝lokesh花了一些時間來提出替代方案。 – Gef

您可以使用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

謝謝！

來源

2016-08-01 04:30:04

謝謝lokesh。不完全是我所希望的，但無論如何它可能是有用的。 – Gef

動畫字體真棒電池圖標

回答

相關問題