文字使用图片添加雪花/躁点效果

来源

http://www.species-in-pieces.com/#

Kapture 2024-12-06 at 15.05.10.gif

效果演示

Kapture 2024-12-06 at 15.44.40.gif

源码

<h2 class="textured-type">测试一下</h2>

body {
  background-color: yellowgreen;
}
.textured-type {
  font-size: 5.5em;
  background: url('http://www.species-in-pieces.com/img/textured-ui/repeat-white.png')
    center center repeat;
  background-size: 80px 60px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: scratchy 0.253s linear forwards infinite;
}

@keyframes scratchy {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 0 0;
  }
  26% {
    background-position: 20px -20px;
  }
  50% {
    background-position: 20px -20px;
  }
  51% {
    background-position: 40px -40px;
  }
  75% {
    background-position: 40px -40px;
  }
  76% {
    background-position: 60px -60px;
  }
  99% {
    background-position: 60px -60px;
  }
  100% {
    background-position: 0 0;
  }
}