2

この例http://livedemo00.template-help.com/wt_39513/index.htmlのような navbar リンクの上にホバーを作成したいと思います

必ずしも答えが欲しいわけではありませんが、何が起こっているのかを理解するために注意する必要があるリソースやガイドがもっと必要です。私がこれまで読んだことから、CSS3 にはこの機能を制御するトランジションがありますか?

特に達成したい例で、それがどのように機能するかを学びたいと思います。

任意の助けをいただければ幸いです

4

1 に答える 1

2

非常に興味深い例です、Richlewis。li表示されたページでは、メニューの各要素でトランジションが使用されています。スタイルシートには、次の行があります。

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

これは基本的に、「この li 要素のすべてのプロパティでトランジションを使用する」ことを意味します。ただし、この例では、最も重要なのはbackground-positionプロパティです。この要素にカーソルを合わせたときに背景をスクロールするために使用されます。

背景パターン (ここで見つけることができます: http://livedemo00.template-help.com/wt_39513/images/nav_li.png ) は、2 つの透明なギャップがある幅 1 ピクセルの緑色の画像です。

CSS3 のトランジションについて詳しく知りたい場合は、http: //www.alistapart.com/articles/understanding-css3-transitions/という素晴らしい記事を見つけました。

お役に立てれば。:)

于 2012-06-21T18:21:52.050 に答える