来源
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;
}
}
