SCSS
@import url(https://fonts.googleapis.com/css?family=Cutive+Mono);
$d: 20px; $w: 100px; $bc: #DB5A9B; $t: 10s;
body {
background: $bc url("http://orig10.deviantart.net/7b56/f/2017/066/d/e/__dva___overwatch___chibi_by_cure_rainbow-db1isar.png")no-repeat;
background-attachment: fixed;
background-size: 30%;
background-position: right bottom;
}
.center {
display: inline-block;
transform: translate(calc(-50% + 50vw), calc(-50% + 50vh));
filter: contrast(3);
}
.loader {
font-size: 0;
padding: 60px;
text-align: center;
position: relative;
width: 100px;
}
.text {
animation: b ($t / 2) infinite;
color: #fff;
font-size: 40px;
font-family: 'Cutive Mono', ;
line-height: 145px;
position: absolute;
width: 100%;
text-align: center;
top: 0;
}
.dot {
border-radius: $d / 2;
display: inline-block;
filter: blur(10px);
height: $d; width: $d;
&:first-child {
animation: fc $t ease infinite;
float: left;
}
&:last-child {
animation: lc $t ease infinite;
margin-left: -$d;
}
}
@keyframes fc {
0% { background: #ddf; transform: translate3d(0, 0, 0); }
25% { background: #1d2; }
50% { background: #aaf; transform: translate3d($w - $d, 0, 0); }
100% { background: #ddf; transform: translate3d(0, 0, 0); }
}
@keyframes lc {
0% { background: #3fd; }
25% { background: #4df; }
50% { background: #12d; }
75% { background: #4df; }
100% { background: #3fd; }
}
@keyframes b {
0%, 100% { filter: blur(5px); }
50% { filter: blur(1.5px); }
}
