CSSで背景グラデーション画像遷移トランジション効果を実現

この記事は、CSSの背景グラデーション画像トランジション効果のテクニックを詳しく説明した関連情報を主に紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1.background-image は CSS3 トランジションをサポートしていません

background-image は CSS3 トランジションをサポートしておらず、背景画像として CSS3 グラデーションが存在する場合、以下の CSS 設定はトランジション効果を持ちません。

.gradient {
  background-image: linear-gradient(to right, olive, green);
  transition: background-image 0.5s linear;
}
.gradient:hover {
  background-image: linear-gradient(to right, green, purple);
}

マウスをホバーすると、グラデーションの変化が非常に突然で、トランジション効果がまったくないことがわかります。

次の質問は、グラデーションがホバーしているときにトランジション効果を実現したい場合、それをどのように実現するかです。考えられる方法をいくつか紹介します。

2. グラデーション遷移を実現するには、background-position を使用します

background-image CSS3 遷移をサポートしていませんが、background-position はサポートしています。そのため、背景の位置を制御することで、グラデーション遷移を実現できます。効果。

効果は次のとおりです (マウスホバー):

関連するコードは次のとおりです:

<p class="box"></p>

.box {
    max-width: 400px;
    height: 200px;
    background: linear-gradient(to right, olive, green, purple);
    background-size: 200%;
    transition: background-position .5s;    
}
.box:hover {
    background-position: 100% 0;    
}

3. 背景色を使用してグラデーション遷移を実現します

background-image CSS3 のトランジション Transition はサポートしていませんが、background-color はサポートしているため、背景色を制御し、カラー レンダリング技術を使用することで、グラデーション トランジション効果も実現できます。

マウスホバーの前後の効果の比較:

関連するコードは次のとおりです:

<p class="box"></p>

.box {
    max-width: 400px;
    height: 200px;
    background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5));
    transition: background-color .5s;    
}
.box:hover {
    background-color: purple;    
}

4番目に、次を使用します。疑似要素と不透明度グラデーショントランジションを実現します

フェイクの助けを借りて要素は変換されたグラデーション効果を作成し、グラデーショントランジション効果はオーバーレイグラデーションの不透明度を変更することで実現されます。

下の図はホバー後の効果を示しています:

関連するコードは次のとおりです:

<p class="box"></p>

.box {
    max-width: 400px; height: 200px;
    background: linear-gradient(to right, olive, green);
    position: relative;
    z-index: 0;    
}
.box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, green, purple);
    opacity: 0;    
    transition: opacity .5s;
    z-index: -1;
}
.box:hover::before {
    opacity: 1;    
}

以上がCSSで背景グラデーション画像遷移トランジション効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。