Как сделать подобный эффект на сайте или как называется такой эффект?
Линия - это просто блок с размерами и черным фоном.
Чтобы добиться такого эффекта, достаточно воспользоваться свойствамиposition: absolute; left: N; top: N; - чтобы убрать ее за пределы экранаtransform: rotate(45deg); - чтобы повернуть ее на нужный угол (в данном случае 45 градусов)transition: 2s width; - чтобы анимировать изменение ширины
А после загрузки страницы запустить js скрипт, который задаст новую ширину линии, такую, чтобы она вылезла из-за границы экранаwindow.onload = function () {
  var line = document.querySelector('#line');
  if (line) {
    line.style.width = '100px';
  }
}
Используя это, достаточно просто будет усложнить анимацию так, как вам хочется.
Линия - это просто блок с размерами и черным фоном.
Чтобы добиться такого эффекта, достаточно воспользоваться свойствамиposition: absolute; left: N; top: N; - чтобы убрать ее за пределы экранаtransform: rotate(45deg); - чтобы повернуть ее на нужный угол (в данном случае 45 градусов)transition: 2s width; - чтобы анимировать изменение ширины
А после загрузки страницы запустить js скрипт, который задаст новую ширину линии, такую, чтобы она вылезла из-за границы экранаwindow.onload = function () {
  var line = document.querySelector('#line');
  if (line) {
    line.style.width = '100px';
  }
}
Используя это, достаточно просто будет усложнить анимацию так, как вам хочется.