espera aí...

20 de janeiro de 2019

Linhas tracejadas repetidas infinitas em SVG

Linhas tracejadas repetidas infinitas em SVG

Com a continuação do último post desta vez, mostrarei rapidamente como fazer as animações repetidas para que você possa exibir suas habilidades em um site.

Isso não é necessário em um tutorial completo. É melhor eu mostrar um codepen que tenha o código fonte completo.

See the Pen Flat Devices by Maximilian Alexander (@mbalex9) on CodePen.

Correr

  1. Para fazer uma linha tracejada adicionar um stroke-dasharray: 5;ao seu CSS. Sinta-se à vontade para brincar com o número:
.dashed-line { stroke-dasharray : 5 ; }


< line class = “linha tracejada” x1 = “144” y1 = “84” x2 = “296” y2 = “84” />
  1. Para fazer os traços se moverem, adicione quadros-chave ao seu css. Mais uma vez, sinta-se à vontade para brincar com o valor1000
@ keyframes dash-animation { para { stroke-dashoffset : 1000 ; } }




Para fazê-los se mover na direção oposta, certifique-se de que o número seja negativo . Eu coloquei -1000.

@ keyframes dash-animation { para { stroke-dashoffset : – 1000 ; } }




Agora adicione 2 classes css, uma para animações tracejadas para mover para a esquerda, a outra para mover para a direita:

.dash-move { animação : traço-animação 20s infinito linear; }



.dash-move-opposite { animação : traço-animação-oposto 20s infinito linear; }


Você vai querer ter certeza de adicionar os valores infinitelinearpara ter certeza de que ele repete constantemente. Em seguida, adicione tempo para a frequência com que você deseja que os quadros-chave sejam usados. Neste exemplo eu fiz 20spor 20 segundos.

  1. Agora adicione o dash-movedash-move-oppositepara as linhas.
<line class = “linha tracejada traço-movimento” x1 = “144” y1 = “84” x2 = “296” y2 = “84” />

Este tem dash-move-opposite. As linhas se moverão na direção oposta.

<line class = “linha tracejada traço-movimento-oposto” x1 = “144” y1 = “84” x2 = “296” y2 = “84” />

Boa sorte !

Posted in Blog
Write a comment