Как анимировать линию диагоналей прямоугольника?

#css #html5 #svg #css_animation

Я пытаюсь добавить анимацию линий по диагонали.
 Я знаю высоту и ширину прямоугольника (динамически складывается).
   Теперь пытаюсь анимировать строку от N до L, или от O до M.     

Попытался сделать это с SVG, - увеличить x1, y1, x2, y2 линии, но это становится
сложным.   

Есть любое более простое решение?   


    

Ответы

Ответ 1

SVG

Вы можете присвоить своим линиям stroke-dashoffset и анимировать его до 0. Чтобы
рассчитать значения для stroke-dasharray и stroke-dashoffset, я использовал метод -
getTotalLength() для вычисления значений stroke-dasharray и stroke-dashoffset. 



svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#om{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}





И на этот раз обе строки анимированы с M на O и L на N: просто измените значения
с x1 на x2 и наоборот. То же самое для y. Это изменит направление линии.  



svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#mo,#ln{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}





Я использую одну и ту же анимацию для #om и #nl


Ответ 2

Вот простая идея с background окраской.

Вам просто нужно увеличить background-size, чтобы нарисовать линии:   


Анимация при наведении курсора   



.box {
  width:200px;
  height:100px;
  border:2px solid;
  background:
    /*M - O*/
    linear-gradient(to top right,
      transparent calc(50% - 3px),red calc(50% - 2px),
      red calc(50% + 2px),transparent calc(50% + 3px)) top left,
      
    /*N - L*/  
    linear-gradient(to bottom right,
      transparent calc(50% - 3px),#000 calc(50% - 2px),
      #000 calc(50% + 2px),transparent calc(50% + 3px)) bottom left;
  background-repeat:no-repeat;
  background-size:0 0;
  transition:1s linear;
}
.box:hover {
  background-size:100% 100%;
}








Измените background-position, чтобы изменить начало анимации:   




.box {
  width:200px;
  height:100px;
  border:2px solid;
  background:
    /*M - O*/
    linear-gradient(to top right,
      transparent calc(50% - 3px),red calc(50% - 2px),
      red calc(50% + 2px),transparent calc(50% + 3px)) bottom right,
      
    /*N - L*/
    linear-gradient(to bottom right,
      transparent calc(50% - 3px),#000 calc(50% - 2px),
      #000 calc(50% + 2px),transparent calc(50% + 3px)) top right;
  background-repeat:no-repeat;
  background-size:0 0;
  transition:1s linear;
}
.box:hover {
  background-size:100% 100%;
}








Вот версия без использования calc(), которая будет работать с IE.
Найти правильные значения будет немного сложно, и вам понадобится
анимация background-position, которая также сложна:




.box {
  width:200px;
  height:100px;
  border:2px solid;
  background:
    /*M - O*/
    linear-gradient(to top right,
      transparent 176px,red 176px,
      red 181px,transparent 181px) left 200% top 200%,
      
    /*N - L*/
    linear-gradient(to bottom right,
      transparent 176px,black 176px,
      black 181px,transparent 181px) left -100% bottom -100%;
  background-repeat:no-repeat;
  background-size:200% 200%;
  transition:1s linear;
}
.box:hover {
  background-position:0 0,left 0 bottom 0;
}