2

ここで、フッターのいずれかのリンク (「The Bookshelf」リンク) にマウスを合わせると、左に移動するわずかなスパーク効果が得られます。

私はfirebugで試しましたが、それがどのように達成されるかについての手がかりを作ることができませんでした.

常に表示されている白い境界線 (?) を単一の親 div と見なし、スパークする div をその中の個々の div と見なすとします。次に、マウス ホバーが発生すると、jquery を使用して子 div の背景色または境界線を左の順序で適用することになっています。それでも、それらの子 div によって親 div の高さが子の高さよりも大きくなるという状況が発生します。

テスト シナリオでは、多数の html ではなく、親 div ( class_1) と 1 つの子 div ( ) を使用しました。class_2

<div class="class_1">
<div class="class_2"></div><!--end of class_2 -->

</div><!-- end of class class_1 -->

CSS:

.class_1{
height111:1px;

width:150px;
margin:0 auto;

border:2px solid red;


}
.class_2{

width:70px;
margin:0 auto;
border:1px solid green;


}

適切な方法は何ですか？

4

2 に答える 2

2

デモ: http://jsfiddle.net/qYpck/

これは、CSS のみを使用して実現されます - 親タグのホバーで遷移する背景グラデーション- background-position は、輝きaの錯覚を与えるプロパティです。

<ul class="link-list">
  <li><a href="#">Link one<span></span></a></li>
  <li><a href="#">Link two<span></span></a></li>
  <li><a href="#">Link three<span></span></a></li>
</ul>

spanリンク内の空の に注意してください。

これは、魔法を行うtransitionトランジションCSSです。-moz--o-

.link-list a:hover>span, .link-list a:focus>span {
    background-position: -100% 0;
    transition: background 0.4s;
}

CSS でトランジションを行うことのメリットは非常に大きく、次のようなメリットがあります。

  • プログレッシブ エンハンスメント (きらめき効果はページ機能に必要ないため、純粋に美的機能であり、認識しないブラウザーの速度を低下させることはありません)

  • CSS トランジションはハードウェア アクセラレーションであり、一般的に JS アニメーションよりもスムーズです。

  • JavaScript エンジンの負担を軽減

続きを読む: jQuery アニメーションよりも CSS アニメーションを使用する利点はありますか? （パフォーマンス、またはその他）

この手法でサポートされるブラウザーを確認するには、caniuse.com を確認してください。

于 2012-10-15T07:12:47.593 に答える
1 
.link-list a:hover>span, .link-list a:focus>span {
    background-position:-100% 0;
    -webkit-transition:background 0.4s;
   -moz-transition:background 0.4s;
    -o-transition:background 0.4s;
    transition:background 0.4s
}

背景アニメーションに CSS トランジション効果を使用する

于 2012-10-15T07:22:37.823 に答える