[CSSチュートリアル]CSS線形グラデーションの凹型矩形遷移の動的効果

この記事では、凹型矩形の線形グラデーション遷移効果の難しさとアイデアについて、主に凹型矩形の実装、凹型矩形への線形グラデーションの追加、線形グラデーションの背景色の遷移について説明します。もし、もっと良い実装があれば、コメント欄で私と議論してください。

トップ画像

凹型の矩形を実装する

このスタイルのヒントになったのは、cssを使って角の凹みを実現するオンライン記事で、クロームタブの角の凹みを実現する方法が書かれていて、以下のような感じでした。

使用方法 radial-gradient 放射状グラデーションは、グラデーションのぼかし距離を0にすることで、円形の境界がはっきりと見えるように実装されています。この考え方に従えば、内側の凹んだ矩形スタイルを実現するために、グラデーションの position のように、中心点の位置を制御し、放射状の円の大きさを調節して、凹面の曲率の度合いを制御します。

のMDNの放射状グラデーションデモでデバッグすることができます。

background: radial-gradient(300px 300px at 112px 0, #eee 75%, #333 75%);

詳細

1. 放射状グラデーション ぼかし距離を0にすると、円の境界に非常に目立つギザギザが見えますが、ぼかし距離を1px増やすと、ギザギザが解消されます。(これが伝説のアンチエイリアス？)
2. Android 4.4.4は放射状グラデーションに対応していません。

線形グラデーションを用いた凹型矩形の実装

背景はすでに使用されているので、放射状グラデーションと線形グラデーションを設定することはできません。

を使用することができます。 mask-image でキーイング効果を得ることができます、MDNの例です。

MDN の例では、緑色の背景に五芒星形の svg を使用しています。グラデーションの凹んだ長方形を実現するには、線形グラデーションの背景に凹んだ長方形の形状を使用して画像をキーにすることができます。

使用方法 mask-image の形状を設定します。 background 線形グラデーションを設定します。

.xxx {
  background: linear-gradient(115deg, #ff66ff, #4db8ff);
  mask-image: radial-gradient(300px 300px at 112px 0, rgba(255, 255, 255, 0) 75%, #333 75%);
}

効果

細部

マスク画像は放射状グラデーションよりも意外とモバイルとの親和性が高く、Android 4.4.4にも対応しています。

グラデーションの背景色遷移

background-image自体は遷移アニメーションに対応していませんが、Zhang Xinxu氏の記事で詳しく説明されているように、いくつかのトローリングで実装することができます。

https://www.zhangxinxu.com/wordpress/2020/08/background-image-animation/

https://www.zhangxinxu.com/wordpress/2018/03/background-gradient-transtion/

background-imageはトランジションアニメーションに対応していませんが、opacityは対応しています。前の線形グラデーションの凹型の矩形の上に別の疑似要素を重ね、疑似要素の背景色を別の線形グラデーション色に設定し、疑似要素の不透明度を制御して線形グラデーションの遷移効果を実現します。

CSS線形グラデーション凹矩形遷移効果については、この記事がすべてです、より関連するCSS線形グラデーション凹矩形遷移コンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧し続け、あなたが将来よりスクリプトハウスをサポートすることを願っています！。