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: radial-gradient(var(--_p) bottom, var(--c2) 79.5%, #0000 80%) no-repeat; --_g4: radial-gradient(var(--_p) top, #0000 79.5%, var(--c2) 80%) no-repeat; background: var(--_g1), var(--_g2), var(--_g1), var(--_g2), var(--_g3), var(--_g4), var(--_g3), var(--_g4); background-clip: text; color: #0000; -webkit-text-stroke: 0.2rem var(--c1); box-decoration-break: clone; animation: s 2s infinite alternate, m 3s infinite linear;}@keyframes m { 0% { background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%, 0% 100%, 100% 100%, 200% 100%, 300% 100%; } 100% { background-position: 0% 100%, 100% 100%, 200% 100%, 300% 100%, -200% 100%, -100% 100%, 0% 100%, 100% 100%; }}@keyframes s { 0% { background-size: 50.5% 60%, 50.5% 60%, 50.5% 60%, 50.5% 60%, 50.5% 90%, 50.5% 90%, 50.5% 90%, 50.5% 90%; } 33% { background-size: 50.5% 70%, 50.5% 70%, 50.5% 70%, 50.5% 70%, 50.5% 75%, 50.5% 75%, 50.5% 75%, 50.5% 75%; } 66% { background-size: 50.5% 55%, 50.5% 55%, 50.5% 55%, 50.5% 55%, 50.5% 80%, 50.5% 80%, 50.5% 80%, 50.5% 80%; } 100% { background-size: 50.5% 90%, 50.5% 90%, 50.5% 90%, 50.5% 90%, 50.5% 95%, 50.5% 95%, 50.5% 95%, 50.5% 95%; }}h1 { font-family: system-ui, sans-serif; font-size: 7rem; max-width: 800px; text-align: center;} |
html
<h1><span>hoge hoge</span></h1> |
can i use
box-decoration-breakのブラウザサポート状況です
via
記事元はCSSで波を作るという旨のものです👇
How to Create Wavy Shapes & Patterns in CSS
