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;
}
}
扫一扫
1863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
