css CSS动画阴影文本 - 剪辑到文本

Posted 2021-05-13

body {
  font-family: 'Luckiest Guy', cursive;
  font-size: 5vw;
}
h1 {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent
      transparent          var(--space)
      var(--c2)            var(--space)
      var(--c2)   calc(    var(--space) +     var(--stripe))
      transparent calc(    var(--space) +     var(--stripe))
      transparent calc(2 * var(--space) +     var(--stripe))
      var(--c3)   calc(2 * var(--space) +     var(--stripe))
      var(--c3)   calc(2 * var(--space) + 2 * var(--stripe))
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}