<div class="content">
Stars & Stripes
</div>
body {
margin:0;
overflow:hidden;
}
/* Stars background pattern by Nicholas Gallagher */
body:before {
animation: counter 10s infinite linear;
background:
linear-gradient(324deg, #226 4%, transparent 4%) -70px 43px,
linear-gradient( 36deg, #226 4%, transparent 4%) 30px 43px,
linear-gradient( 72deg, #eee 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #eee 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #eee 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #eee 7.5%, transparent 7.5%) 30px 23px,
linear-gradient(324deg, #226 4%, transparent 4%) -20px 93px,
linear-gradient( 36deg, #226 4%, transparent 4%) 80px 93px,
linear-gradient( 72deg, #eee 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #eee 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #eee 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #eee 7.5%, transparent 7.5%) 80px 73px;
background-color: #226;
background-size: 100px 100px;
bottom:-100vmin;
content:"";
left:-100vmin;
position:absolute;
right:-100vmin;
top:-100vmin;
}
body:after {
animation: fadeInOut 10s infinite linear;
background-image: repeating-linear-gradient(
#fff,
#fff 5vh,
#c00 5vh,
#c00 10vh);
bottom:-100vmin;
content:"";
left:-100vmin;
position:absolute;
right:-100vmin;
top:-100vmin;
}
@keyframes fadeInOut {
0% {
opacity:.1;
}
50% {
opacity:.9;
}
100% {
opacity:.1;
transform:rotate(360deg);
}
}
@keyframes counter {
100% {
transform:rotate(-360deg);
}
}
.content {
background-color:#fff;
font-family:Georgia;
font-size:2em;
font-variant:small-caps;
font-weight:bold;
letter-spacing:.25em;
margin:1em;
padding:1em;
position:relative;
text-align:center;
z-index:1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.