SCSS
@import 'https://fonts.googleapis.com/css?family=Monoton';
@keyframes circle {
0% { transform: rotate(0deg) translate(-15px) rotate(0deg); }
100% { transform: rotate(360deg) translate(-15px) rotate(-360deg); }
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.letters {
font-family: 'Monoton', cursive;
height: 21em;
width: 13em;
p[class*="letter"] {
position: absolute;
font-size: 18em;
font-weight: bold;
margin: 0;
animation: circle 3s infinite linear;
mix-blend-mode: screen;
&.blue {
color: #0801fb;
animation-delay: 0s;
}
&.green {
color: #1ffe27;
animation-delay: -1s;
}
&.red {
color: #fd1a20;
animation-delay: -2s;
}
}
}
