我有一个简单的字体真棒图标堆栈:
<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
答案 0 :(得分:4)
也许这就是你要找的东西?
<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;
}
答案 1 :(得分:2)
基本上,.icon-stack
上有一个固定的高度/宽度。在两个子元素上具有完全相同的高度。这将导致子元素彼此浮动。从那里开始它只是在悬停时动画它的问题。我在悬停时使用负上边距使其“向上滚动”。负上边距必须等于子元素高度。最重要的是,我只是使用CSS过渡来为它设置动画。
打开/关闭overflow: hidden;
以查看其效果如何。