Создание дизайна и анимации типа выделения в html css ⇐ CSS

[Anonymous]

Итак, на самом деле я создал элемент div как область выделения, но попробовал добавить элементы диапазона внутри элемента управления области выделения, например

A1 B1 C1 D1 >
A2 B2 C2 D2
A3 B3 C3 D3
A4 B4 C4 D4

Но он начинается с A3 и заканчивается на B4, что-то вроде этого, и отображает пустое пространство.
Заранее спасибо.
Я оставляю код ниже или здесь ссылку на код:
https://codepen.io/Vicky-clowdy/pen/KwPZyJP

Код: Выделить всё

#marquee {
background-color: #bff747;
display: flex;
align-items: center;
justify-content: center;
height: 120px;
position: relative;
white-space: nowrap;
}

.track {
display: flex;
flex-direction: row;
justify-content: flex-start;
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee 15s linear infinite;
}

@keyframes marquee {
0% {
transform: translateX(0);
}

100% {
transform: translateX(-50%);
}
}

#marquee span,
#marquee i {
color: black;
font-size: 40px;
text-transform: capitalize;
font-weight: 700;
line-height: 1.2em;
}

#marquee .track i {
margin: 0 30px;
}

Код: Выделить всё

​


[i]*[/i]
 custom branding 1 

[i]*[/i]
 website design 

[i]*[/i]
 digital marketing 

[i]*[/i]
strategy consulting

[i]*[/i]
 analytics & reporting 

[i]*[/i]
 custom branding 2

[i]*[/i]
 website design 

[i]*[/i]
 digital marketing 

[i]*[/i]
strategy consulting

[i]*[/i]
 analytics & reporting 

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-html-css