CSS
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fff;
}
.get-in-sync {
height: 30vw;
width: 30vw;
position: relative;
}
.get-in-sync::before {
mix-blend-mode: overlay;
content: 'Compliance';
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 30vw;
font-size: 16px;
font-weight: 600;
position: absolute;
height: 30vw;
width: 30vw;
background-color: #ABA3FF;
border: 0.3vw solid #fff;
border-radius: 50%;
left: 15vw;
animation: dance-a 10.2s ease-in-out infinite alternate;
}
.get-in-sync::after {
mix-blend-mode: overlay;
content: 'Security';
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 30vw;
font-size: 16px;
font-weight: 600;
position: absolute;
height: 30vw;
width: 30vw;
background-color: #3FD4B6;
border: 0.3vw solid #fff;
border-radius: 50%;
right: 15vw;
animation: dance-b 10.2s ease-in-out infinite alternate;
}
@keyframes dance-a {
0% {
left: 15vw;
}
100% {
left: 5vw;
}
}
@keyframes dance-b {
0% {
right: 15vw;
}
100% {
right: 5vw;
}
}
