پیشنمایش زنده
کد HTML
<svg height="0" width="0">
<defs>
<filter color-interpolation-filters="sRGB" height="200%" y="-50%" width="200%" x="-50%" id="goo">
<feGaussianBlur result="blur" stdDeviation="8" in="SourceGraphic"></feGaussianBlur>
<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>
</filter>
</defs>
</svg>
<svg height="180" width="320" viewBox="0 0 320 180">
<g filter="url(#goo)">
<circle cy="90" cx="160" r="24" fill="#275EFE" class="circle"></circle>
<circle cy="90" cx="160" r="24" fill="#275EFE" class="circle right"></circle>
</g>
</svg>
کد CSS
.circle {
animation: move571 4s linear infinite;
}
.circle.right {
animation-direction: reverse;
}
@keyframes move571 {
25% {
transform: translateX(-32px);
}
75% {
transform: translateX(32px);
}
}