スクロール可能なグラデーション チャット バブル
P粉197639753
P粉197639753 2023-09-01 11:52:18
0
2
636
<p>次の例に示すように、下のグラデーションでスクロールするとグラデーションが変化するチャット バブルを備えた白いコンテナが必要です。</p> <p><code>chatBubble</code> の背後にある <code>.container</code> 部分を透明にして、<code>.root</code> の背景が見えるようにしてみました。 </p> <p> <pre class="brush:css;toolbar:false;">.root { 背景色: 線形グラデーション(赤、黄); 幅: 100vw; 高さ: 100vh; } 。容器 { 幅: 100%; 高さ: 100vh; 背景色: 白 } .chatバブル { 背景色: 透明; 境界半径: 4px; 最小幅: 50; パディング: 10px; }</pre> <pre class="brush:html;toolbar:false;"><div class="root"> <div class="コンテナ"> <chatBubble>これはチャット バブルです</chatBubble> <chatBubble>これは別のチャット バブルです</chatBubble> </div> </div></pre> </p>
P粉197639753
P粉197639753

全員に返信(2)
P粉293550575

これは私がこれまでのところ得たもので、グラデーションに合わせて白い背景を持てるようにマスクしようとしています。

リーリー リーリー
いいねを押す +0
P粉277824378

.bubble から「影の配置」ができます:

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート