CSS Blend Mode Circles (In Div)
HTML
<div class="parent">
<div class="get-in-sync"></div>
</div>
CSS
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fff;
}
.parent {
position: absolute;
height: 220px;
width: 60vw;
border: 2px solid #000;
}
.get-in-sync {
height: 220px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.get-in-sync::before {
mix-blend-mode: overlay;
content: 'Compliance';
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 197px;
font-size: 17px;
font-weight: 600;
position: absolute;
height: 197px;
width: 197px;
background-color: #ABA3FF;
border: 3px solid #fff;
border-radius: 50%;
margin-left:100px;
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: 197px;
font-size: 17px;
font-weight: 600;
position: absolute;
height: 197px;
width: 197px;
background-color: #3FD4B6;
border: 3px solid #fff;
border-radius: 50%;
margin-left:-100px;
animation: dance-b 10.2s ease-in-out infinite alternate;
}
@keyframes dance-a {
0% {
margin-left:100px;
}
100% {
margin-left:50px;
}
}
@keyframes dance-b {
0% {
margin-left:-100px;
}
100% {
margin-left:-50px;
}
}
