Make some hacky noise with CSS gradients 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 偶然見つけたエフェクトで、かなりクールだと思いました。繰り返しの放射状グラデーションのリングのサイズを@propertyを使って非常にゆっくりと0pxにアニメーションさせていたところ、0に近づくと狂い始めることに気づきました。 そこで、私は考え始めました。 セットアップ トリック アニメーション化 最後に セットアップ 最初に作業していたマスクは、適度な5pxと5pxの間隔の放射状の繰り返しマスクです: .noise { --lines: 4px; mask: repeating-radial-gradient( circle at center, #000, var(--lines), #000, 0, /*
![CSSだけで作る!クールなノイズアニメーション - コハム](https://cdn-ak-scissors.b.st-hatena.com/image/square/3ebe00afe5eddd9d327729db4cff8a4d2e9c2a98/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fc%2Fcohamucohamu%2F20240718%2F20240718212210.png)