css - 画像リンクのロールオーバー効果

Question

ここに見られるものと同様の画像リンクのロールオーバー効果を作成する方法を知っている人はいますか? このためのチュートリアルはありますか？背景の不透明度を変更して目を表示させるのは簡単ですが、開発者がどのようにしてチーズホイールをそのようにスライドさせたのかわかりません.

スクリーンショット:

Answer 1

これは、次の 2 つの組み合わせです。

1 つは、(CSS で) ホバー時にウェッジの位置を変更することです。私はあなたがそれを行う方法を知っていると仮定します.

もう一方 (アニメーションを作成するもの) は、遷移時間を指定して、ある状態から別の状態にスムーズに移動するようにします。

遷移の仕組みの詳細については、http://www.w3schools.com/css3/css3_transitions.aspを参照してください。

残念ながら、クロスブラウザーのサポートは貧弱であり、各ブラウザーは独自のプレフィックスを使用しています。ご指摘のサイトでは以下を使用しています:

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;`