动画字体真棒电池图标

Question

这是我的第一篇文章。我的问题很简单：通过在类中添加适当的代码，您可以轻松地为cog设置动画，是否有一种简单的方法可以将电池图标从空设置为完全？

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

谢谢！