HTML5キャンバスを使用したアニメーションのベタ背景を削除

Question

純粋なCSSとHTML5のノイズアニメーションを作成するには、hereの答えに従っています。

バックグラウンドが単色であるときはうまくいきますが、映画の背景でこのように見えるようにするにはどうすればいいですか？

問題のページhereが表示されます。

あなたがよく見ると、映画の黒い背景オンタップに気付くでしょう。 透明なものを削除したり背景を透明にすると、一般的なスタイルがより「太った」外観に変わります。これは私が探しているものではありません。

私はCSSとHTMLのみを使用したいと思っていますか？またはJavaScriptなどを使用する必要がありますか？

Answer 1

これはあなたが使用している「グリッチ」アニメーションのプロパティだと思います。

：beforeはオフセットが-2pxで、：afterはオフセットが2pxです。 これは、テキストを4ピクセルずつ太く見やすくします。

バックグラウンドが実線の場合、：afterは実際のテキストを非表示にします：前にはグリッジがあるように見えます。

ただし、コンテンツを背景色で非表示にしていない場合は、実際には太字のように見えます。

あなたが持っているつもり効果に応じて、あなたがキーフレームでクリップ値でプレーしたいと、元の色を透明にするには：

.glitch { color: transparent; } 
.glitch::before { background: transparent; } 
.glitch::after { background: transparent; } 

そして、キーフレームのクリップ値と遊ぶ（などあなたはすでにそうしたでしょう）。

これは確かに別の効果をもたらし、あなたが探しているものではないことに注意してください。しかし、あなたが使ったグリッチ技法は、部分的にテキストを隠すために背景に頼っています。