我有一个简单的 Font Awesome 图标堆栈:
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-flag icon-light"></i>
</span>
我正在想办法单独使用 css 在悬停时为图标设置动画。我试图达到的效果类似于此处的“社交分享”图像: http://demo.rocknrolladesigns.com/html/jarvis/shortcodes.html . (抱歉,您需要滚动,因为没有#anchor)。
该网站在 png 图像上使用偏移,但我想尝试使用 font-awesome 和一些 CSS3。有什么想法吗?
编辑
此处尝试(失败!)实现:http://bootply.com/66542
最佳答案
也许这就是您要找的东西?
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-flag icon-light first"></i>
<i class="icon-flag icon-light second"></i>
</span>
和 CSS
span {
font-size: 50px;
color: #fff;
}
.icon-stack-base {
color: white;
}
.icon-light {
color: black;
}
.icon-stack, .icon-stack-base, .icon-flag {
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
overflow: hidden;
}
i {
height: 60px;
width: 60px;
}
.icon-stack:hover {
color: black;
cursor: pointer;
}
.icon-stack:hover .icon-stack-base {
color: #5b9a68;
}
.icon-stack:hover .first {
margin-top: -80px;
}
.icon-stack:hover .second {
color: white;
}
关于css - 动画 Font Awesome 堆栈以在悬停时旋转图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17494107/