<div></div>
div {
height: 100px;
line-height: 100px;
text-align: center;
background-image: radial-gradient(circle at center, #000 0 30px, #fff 30px 60px);
background-position-x: 100px;
position: relative;
animation: move 2s infinite linear alternate;
&::before {
content: "LOREM IPSUM";
color: #fff;
mix-blend-mode: difference;
font-size: 24px;
font-weight: 900;
}
}
@keyframes move {
0% {
background-position-x: -60px;
}
100% {
background-position-x: 60px;
}
}