Как я могу превратить линию в две и повернуть с помощью CSS

Question

Я хочу, чтобы в заголовке была прямая линия, а затем через несколько секунд после загрузки страницы я хочу, чтобы эти строки медленно двигались вниз, пока они не будут выглядеть так, как показано на рисунке ниже:

Я думал об использовании свойства css transform для поворота двух поворотов на два деления, но это не похоже на решение, так как вы можете увидеть результат в моей ручке здесь

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="big">
  <div class="arrow-box">
    <div class="line line-1"></div>    
    <div class="line line-2"></div>

  </div>
</div>

CSS:

#big{
  background: red;
  height: 200px;
}
.arrow-box{
  max-width: 200px;
  margin: 0 auto;
  padding-top: 10px;

}
.line{
  background: white;
  width: 60px;
  height: 1px;
}

.line-1{
  transform: rotate(20deg);
}

.line-2{
  transform: rotate(-20deg);
}

Как сделать так, чтобы линия была похожа на значок на изображении после загрузки страницы

Answer 1

Вы можете сделать это с помощью CSS анимации. Вы можете использовать rotateZ transform для создания формы стрелки, а также scale для увеличения ширины линий по мере анимации.

Вам также нужно использовать transform-origin для обеих частей для преобразования в нужной точке.

.line {
  position: relative;
  width: 100px;
}

.line:after,
.line:before {
  background: black;
  position: absolute;
  content: "";
  height: 2px;
  width: 50%;
  bottom: 0;
}

.line:before {
  left: 0;
  animation: moveBefore 1s linear forwards;
  transform-origin: center left;
}

.line:after {
  right: 0;
  animation: moveAfter 1s linear forwards;
  transform-origin: center right;
}

@keyframes moveBefore {
  0% {
    transform: rotateZ(0) scale(1, 1);
  }
  50% {
    transform: rotateZ(15deg) scale(1.05, 1);
  }
  
  100% {
    transform: rotateZ(30deg) scale(1.16, 1);
  }
}

@keyframes moveAfter {
  0% {
    transform: rotateZ(0) scale(1, 1);
  }
  50% {
    transform: rotateZ(-15deg) scale(1.05, 1);
  }
  
  100% {
    transform: rotateZ(-30deg) scale(1.16, 1);
  }
}

<div class="line"></div>

Вы также можете сделать это с svg, используя элемент line и некоторый javascript для перемещения y позиции левой и правой части строки. Для постепенного увеличения угла можно использовать метод setInterval.

let step = 0;
const left = document.querySelector('.left-line');
const right = document.querySelector('.right-line');

function move(el, prop, size) {
  el.setAttribute(prop, +el.getAttribute(prop) + size);
}

setInterval(() => {
  if (step <= 40) {
    move(left, 'y2', 0.8);
    move(right, 'y1', 0.8)
    step += 1;
  }
}, 30)

<svg xmlns="http://www.w3.org/2000/svg">
  <line class="left-line" x1="0" y1="20" x2="40" y2="20" stroke="black" />
  <line class="right-line" x1="40" y1="20" x2="80" y2="20" stroke="black" />
</svg>

Answer 2

В то время как принятый ответ работает просто отлично, художник во мне не может взять перекрытие линий в центре из-за масштабирования.Вот несколько альтернативных опций:

Опция 1 - clip-path

Используя clip-path, анимируйте середины прямоугольника, чтобы преобразовать многоугольник в шеврон.Это работает, маскируя цвет фона элемента вне анимированной фигуры.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: black;
  clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px);
  animation: 2s infinite linear;
}

.line.down {
  animation-name: chevron-down;
}

.line.up {
  animation-name: chevron-up;
}

@keyframes chevron-down {
  from {
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 2px, 50% 2px, 0 2px);
  }
  to {
    clip-path: polygon(0 0, 50% 48px, 100% 0, 100% 2px, 50% 50px, 0 2px);
  }
}

@keyframes chevron-up {
  from {
    clip-path: polygon(0 48px, 50% 48px, 100% 48px, 100% 50px, 50% 50px, 0 50px);
  }
  to {
    clip-path: polygon(0 0, 50% 48px, 100% 0, 100% 2px, 50% 50px, 0 2px);
  }
}

<div class="line down"></div>
<div class="line up"></div>

Поддержка clip-path, однако, пятнистая.

---

Вариант 2 - псевдоэлементы

Если вы не можете использовать clip-path или предпочитаете использовать псевдоэлементы, измените их расположение и источник преобразования, чтобы они исходили из центра (а не из верхних углов):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line {
  position: relative;
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.line::before,
.line::after {
  position: absolute;
  content: '';
  display: block;
  bottom: 0;
  height: 2px;
  width: 50%;
  background-color: black;
  animation: 2s linear infinite;
}

.line::before {
  transform-origin: bottom right;
  left: 0;
  animation-name: before;
}
.line::after {
  transform-origin: bottom left;
  right: 0;
  animation-name: after;
}

@keyframes before {
  to { transform: rotateZ(30deg); }
}

@keyframes after {
  to { transform: rotateZ(-30deg); }
}

<div class="line"></div>