Nov 10, 2022164 views
CSSAdd prefixes
1.circle { 2 animation: move571 4s linear infinite; 3} 4 5.circle.right { 6 animation-direction: reverse; 7} 8 9@keyframes move571 { 10 25% { 11 transform: translateX(-32px); 12 } 13 14 75% { 15 transform: translateX(32px); 16 } 17}
HTML
1<svg height="0" width="0"> 2 <defs> 3 <filter color-interpolation-filters="sRGB" height="200%" y="-50%" width="200%" x="-50%" id="goo"> 4 <feGaussianBlur result="blur" stdDeviation="8" in="SourceGraphic"></feGaussianBlur> 5 <feColorMatrix result="cm" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" mode="matrix" in="blur"></feColorMatrix> 6 </filter> 7 </defs> 8</svg> 9 10<svg height="180" width="320" viewBox="0 0 320 180"> 11 <g filter="url(#goo)"> 12 <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle"></circle> 13 <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle right"></circle> 14 </g> 15</svg>