Wouter Raateland
@keyframes leftRight {
from { transform: translate(-50%, -50%) translate(-3em, 0); }
to { transform: translate(-50%, -50%) translate(3em, 0); }
}
.box {
background-color: #000;
color: #fff;
}
.box::before {
content: 'Hello World';
}
.box::after {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 1.5em;
height: 1.5em;
border-radius: 100%;
background-color: #fff;
mix-blend-mode: difference;
animation: leftRight 3s linear infinite;
animation-direction: alternate;
}
GottZ
.box {
background: #000;
color: #fff;
}
.box:before, .box:after {
position: absolute;
content: "Hello World"
}
@keyframes derp {
0%, 100% {
clip-path: circle(20px at 15% 50%);
}
50% {
clip-path: circle(20px at 82% 50%);
}
}
.box:after {
color: #000;
background: #fff;
padding: 20px;
animation-iteration-count: infinite;
animation-name: derp;
animation-duration: 6s;
animation-timing-function: linear;
}