右端からフェードインし、左端からフェードアウトするテキストを含む CSS マーキーを作成しようとしています。文字の端だけが透明になります。これを「不透明マスク」と呼び、左右の端にぼかします。
CSS マーキーのコード例は見つかりますが、このようなフェードイン/フェードアウト効果を備えたものはありません。また、背景を完全に透明にして、テキストのみにエッジ効果を持たせたいと考えています。
コンテナにグラデーションを追加しようとしましたが、後から考えると、それは正しいパスではないようです。以下は私がこれまでに思いついたコードです。助けてください、ありがとう！
@Bernard Borg: 2 番目の新しい例でコードを更新しました。それ以上は、不透明度は使用されません。つまり、A) 基礎となる背景色へのハードコーディングに依存し、B) 単色の背景のみで動作します。 - これは、私のユースケースでは許容可能です。ありがとう！ (色の代わりに不透明度でマーキーをオーバーレイする方法はありますか?)
リーリー リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
不透明度プロパティをアニメーション化します (読みやすくするためにコードをクリーンアップします);
補足: アニメーションにベンダー プレフィックスは必要なくなりました。
今後この質問に遭遇する人のために - この質問に対する答えは共同の努力によって得られます。質問の中で答えを見つけてください。
これがあなたの最新の質問に最も近いものです;