动画字体真棒电池图标

问题描述：

这是我的第一篇文章。我的问题很简单：您可以通过在类中添加适当的代码轻松地制作齿轮动画，是否有一种将电池图标从空到动的简单方法？动画字体真棒电池图标

我很惊讶我的帖子收到-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

谢谢！

谢谢lokesh。不完全是我所希望的，但无论如何它可能是有用的。 – Gef

动画字体真棒电池图标

相关推荐