@xonar
А смысл?

Как сделать такой пунктир и не засорить код мусором?

Здравствуйте. Нашёл пример на одном сайте, где пунктирная линия реализована через множество div'oв. Как можно реализовать такую линию, чтоб ещё и анимацию к ней можно было прикрепить, но без многочисленных дивов в разметке. И желательно, чтоб при добавление нового пункта, пунктирная линия бы автоматически увеличилась.

Сайт с демо, имеется ввиду блок со скроллом - клац

5d63f153ac857772607933.png
5d63fa736a6b5505049740.png
  • Вопрос задан
  • 228 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Ну тогда можешь так сделать, если фон позволяет:


Линию, которая делает а-ля мигание, можешь сделать тоже на повторяющийся градиент по ширине нескольких пунктиров, чтобы сделать анимацию через нужный промежуток. (Мне самому лень это делать, это долго.) Либо же просто начинать этот блок после каждой секции, чтобы его копии был разделителями между секциями.

Если нужно прямо как на сайте — без разметки тебе не обойтись.

Более простой вариант анимации именно линии делается так, например:


В последнем примере анимирование не через background-position, потому что такой метод не работает с направлением градиента to bottom.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Madeas
@Madeas
UI / UX Designer, Frontend Developer
там же есть все.

<div class="dashed-line"></div>
CSS:
.dashed-line {
  animation: height 4s cubic-bezier(1.0,2.0,0,1.0) 1000ms forwards;
}

@keyframes height {
0% {
    height: 0px;
}
100% {
    height: 215px;
}
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы