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

Ads

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;
}
Ads

html

<h1><span>hoge hoge</span></h1>

can i use


box-decoration-breakのブラウザサポート状況です

via

Multi-line CSS only wavy text

記事元はCSSで波を作るという旨のものです👇
How to Create Wavy Shapes & Patterns in CSS

タイトルとURLをコピーしました