css让文本闪烁,CSS3 文本特效 - 闪烁的斑点

CSS

语言：

CSSSCSS

确定

body {

font-family: 'Permanent Marker', cursive;

background: #1d1f20;

color: #fff;

}

.centered {

margin: 2rem auto;

font-size: 1rem;

padding: 0 4rem 0 4rem;

border-radius: 4px;

}

@media (min-width: 480px) {

.centered {

width: 90%;

font-size: 1.5rem;

}

}

@media (min-width: 768px) {

.centered {

width: 80%;

font-size: 2rem;

}

}

@media (min-width: 1024px) {

.centered {

width: 60%;

font-size: 2.5rem;

}

}

@media (min-width: 1280px) {

.centered {

width: 50%;

font-size: 3rem;

}

}

h1 {

background: url("http://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;

-webkit-animation: scratchy 0.253s linear forwards infinite;

animation: scratchy 0.253s linear forwards infinite;

}

@-webkit-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;

}

}

@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;

}

}