2022年09月28日(水)

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

• 0
• 0
• 4
• 8

Result

See the Pen
Multi-line CSS only wavy text by kachibito (@kachibito)
on CodePen.

こういうのです。かなり複雑だけど思ったよりも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: radial-gradient(var(--_p) bott...