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 に答える