0

下にテキストが中央に配置されたアイコンのリストを表示する水平メニューを作成しようとしています。

これは私がこれまでに達成したことです：

http://lifeofstrange.com/fade/

ホバーするとフェードイン/フェードアウトする 1 つの画像スプライトをアイコンに使用したいと思います。可能であれば、その下のテキストにもフェード効果があります。

私は効果を達成することに非常に近づいていますが、css3トランジションがコードのどこにあるのかわかりません.

あなたの助けや援助は大歓迎です。

4

1 に答える 1

0

矢印とテキストのフェードトランジションが必要な場合は、テキストの色と矢印の背景の位置を変更する必要はありません。やりたいことは、背景を暗い矢印に設定し、ホバーしたときに不透明度を0.6か何かに設定し、テキストと同じにすることです。背景の位置を移動すると、スプライトのある部分から別の部分にスライド効果が表示されますが、これは希望どおりではありません。

ul li a {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
ul li a:hover {
    opacity: 0.6;
}
于 2012-10-10T07:04:54.543 に答える