web-dev-qa-db-ja.com

CSSを使用してホバーで滑らかなグレースケールを作成する方法

私のウェブサイトにはロゴがあります。ホバーでグレースケールになっているので、スムーズに色付けしたいです。機能しているがスムーズではない。 CSSトランジションを使用しています。

これは私のコードです

<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />

   <style>
    img.tt-logo {
      filter: grayscale(1);
      transition: grayscale 0.5s;
    }

    img.tt-logo:hover {
      filter: grayscale(0);
    }
   </style>
csscss-transitionsgrayscale
9
Maria

このようにしてみてください：

 img.tt-logo {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 }

 img.tt-logo:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }

すべての画像には独自のaltがあり、img.classを使用せずに使用できます。

 img[alt="TT ltd logo"] {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 }

 img[alt="TT ltd logo"]:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }

この場合、classは余分です

15
Igor Ivancha

フィルターのアニメーション化には多くの計算が必要であり、一部のブラウザーではパフォーマンスを低下させる可能性があります。

グレースケールイメージのopacityをアニメーション化して、その下のフルカラーイメージを表示することで、パフォーマンスを向上させることができます。

ここに例があります。

6
Rafi