<div class="letters">
<p class="letters__letter letters__letter--blue">A</p>
<p class="letters__letter letters__letter--green">A</p>
<p class="letters__letter letters__letter--red">A</p>
</div>
@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: black;
}
.letters {
height: 21em;
width: 13em;
&__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;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.