0
这是我的第一篇文章。我的问题很简单:您可以通过在类中添加适当的代码轻松地制作齿轮动画,是否有一种将电池图标从空到动的简单方法?动画字体真棒电池图标
这是我的第一篇文章。我的问题很简单:您可以通过在类中添加适当的代码轻松地制作齿轮动画,是否有一种将电池图标从空到动的简单方法?动画字体真棒电池图标
您可以使用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
我很惊讶我的帖子收到-1。我的帖子中有什么不清楚的地方?这是一个相当简单的问题:班级代码允许动画一些图标。我想知道电池图标是否可以通过班级代码进行自我动画。看来答案是否定的。感谢lokesh花了一些时间来提出替代方案。 – Gef