Black Friday
by pphheerroonn
HTML
<div id="text">
<h1>BLA<span id="offset">CK F</span>RIDAY</h1>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
background-color:black;
}
div {
text-align:center;
position:absolute;
border:5px solid #FFFFFF;
width:300px;
top:150px;
border-radius:20px;
left:50%;
margin: -50px 0 0 -150px;
animation: border-flicker 2s linear infinite;
}
h1 {
color:#FFFFFF;
font-family: ProximaNova,Segoe UI,Helvetica Neue,Arial,sans-serif;
font-size:64px;
letter-spacing:2px;
animation: text-flicker 3s linear infinite;
}
#offset {
animation: letter-flicker 2s linear infinite;
}
@keyframes text-flicker {
0% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
2% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
8% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
9% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
12% {
opacity:0.1;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
20% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
25% {
opacity:0.3;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
30% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
70% {
opacity:0.7;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
72% {
opacity:0.2;
text-shadow:0px 0px 29px rgba(242, 22, 22, 1)
}
77% {
opacity:.9;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
100% {
opacity:.9;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
}
@keyframes border-flicker {
0% {
opacity:0.1;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
2% {
opacity:1;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
4% {
...