dots :after :before html css animation

Опубликовано: 18 Апрель 2026
на канале: Code - Bard

div class="dots" /div

style
.dots {
width: 72px;
height: 34.6px;
background: radial-gradient(circle closest-side,#3f7556 90%,#0000) 0% 50%,
radial-gradient(circle closest-side,#3f7556 90%,#0000) 50% 50%,
radial-gradient(circle closest-side,#3f7556 90%,#0000) 100% 50%;
background-size: calc(100%/3) 17.3px;
background-repeat: no-repeat;
animation: dots-7ar3yq 1.2s infinite linear;
}

@keyframes dots-7ar3yq {
20% {
background-position: 0% 0%, 50% 50%,100% 50%;
}

40% {
background-position: 0% 100%, 50% 0%,100% 50%;
}

60% {
background-position: 0% 50%, 50% 100%,100% 0%;
}

80% {
background-position: 0% 50%, 50% 50%,100% 100%;
}
}
style