CSSで背景グラデーション画像遷移トランジション効果を実現-CSSチュートリアル-php.cn

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

小云云

リリース： 2018-03-28 11:09:46

オリジナル

4426 人が閲覧しました

この記事は、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: &#39;&#39;;
    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 サイトの他の関連記事を参照してください。