CSSのみで白抜きテキスト内に波打つようなアニメーションエフェクト | かちびと.net

Result こういうのです。かなり複雑だけど思ったよりもCSSが少なかった事に驚いたのと応用しやすそうだったので学ばせて頂こうと思い備忘録として。 radial-gradientでスタイル、background-clipで白抜き、box-decoration-break:cloneでスタイルの一貫性を維持してる、という事だと思います。 css h1 span { --c1: #2e88c7; --c2: #9ccce8; --_p: 93% 83.5% at; --_g1: radial-gradient(var(--_p) bottom, var(--c1) 79.5%, #0000 80%) no-repeat; --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--c1) 80%) no-repeat; --_g3: ra