动画字体真棒栈旋转图标上悬停

我有一个简单的字体真棒图标堆栈：动画字体真棒栈旋转图标上悬停

<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。（道歉，你需要滚动，因为没有＃锚点）。

此网站使用png图片上的偏移量，但我想尝试使用font-awesome和一些CSS3。有任何想法吗？

编辑

试图实现在这里（失败！）：http://bootply.com/66542

来源

2013-07-05 alias51

你尝试过什么实现？ – imjared

基本上，对.icon-stack一个固定的高度/宽度。两个子元素具有完全相同的高度。这将导致子元素浮动到彼此之下。从那里开始，这只是一个关于悬停动画的问题。我在悬停时使用负顶部边距来“滚动”起来。负的上边距必须等于子元素的高度。为了让它脱颖而出，我只是使用CSS转换来为它设置动画效果。

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

来源

2013-07-05 17:43:07 qwerty

我很难将此应用于字体超赞的堆栈; http://bootply.com/66542，你能看到我做错了什么吗？ – alias51

@RobM我在codepen上编写的CSS是LESS语法，我不相信bootply支持更少的编译。您可以通过单击CSS框的标题（它表示CSS（LESS））来从codepen复制原始CSS。复制该框并再次尝试。 – qwerty

@RobM我修复了一个框：http://bootply.com/ 66543你大概可以从那里弄清楚。 – qwerty

也许这是你在找什么？

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-05 18:15:57 stefanbc

动画字体真棒栈旋转图标上悬停

回答

相关问题