0

我有一个简单的字体真棒图标堆栈：

<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

4

2 回答 2

4

也许这就是你要找的？

http://jsfiddle.net/VVeTw/

<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;
}
于 2013-07-05T18:15:57.477 回答
2

基本上，在.icon-stack. 两个子元素的高度完全相同。这将导致子元素在彼此下方浮动。从那里开始，只需在悬停时对其进行动画处理。我在悬停时使用了负上边距来使其“向上滚动”。负上边距必须等于子元素的高度。最重要的是，我只是使用 CSS 过渡来为其设置动画。

切换overflow: hidden;开/关以查看它如何更好地工作。

于 2013-07-05T17:43:07.780 回答