右端からフェードインし、左端からフェードアウトするテキストを含む CSS マーキーを作成しようとしています。文字の端だけが透明になります。これを「不透明マスク」と呼び、左右の端にぼかします。
CSS マーキーのコード例は見つかりますが、このようなフェードイン/フェードアウト効果を備えたものはありません。また、背景を完全に透明にして、テキストのみにエッジ効果を持たせたいと考えています。
コンテナにグラデーションを追加しようとしましたが、後から考えると、それは正しいパスではないようです。以下は私がこれまでに思いついたコードです。助けてください、ありがとう！
@Bernard Borg: 2 番目の新しい例でコードを更新しました。それ以上は、不透明度は使用されません。つまり、A) 基礎となる背景色へのハードコーディングに依存し、B) 単色の背景のみで動作します。 - これは、私のユースケースでは許容可能です。ありがとう！ (色の代わりに不透明度でマーキーをオーバーレイする方法はありますか?)
リーリー リーリー
P粉7060387412024-03-28 00:28:44
不透明度プロパティをアニメーション化します (読みやすくするためにコードをクリーンアップします);
補足: アニメーションにベンダー プレフィックスは必要なくなりました。
P粉0154020132024-03-28 00:07:04
これがあなたの最新の質問に最も近いものです;