Como animar linhas de um SVG só com CSS

Поделиться
HTML-код
  • Опубликовано: 5 ноя 2024

Комментарии • 44

  • @deivideguilherme
    @deivideguilherme 8 месяцев назад

    Sensacional.. tinha encontrado um outro tutorial, muito bom por sinal, entretanto a simplicidade e praticidade do seu foi outro nível, parabéns! Eu Consegui fazer a animação e entender perfeitamente os passos. Só o resultado final que em duas letras da minha palavra em questão não fecham por completo, ai fui alterando valores do stroke-dashoffset e array, no caso ao invés de 1000 foi necessário o valor de 1950 para completar com perfeição o fechamento das letras. Mais uma vez parabéns pelo conteúdo!

  • @rafaelalvesduarte4928
    @rafaelalvesduarte4928 4 года назад +1

    Não entendo pq a galera da dislike em um vídeo que alguém está dedicando seu tempo a ensinar algo útil. Parabéns Ricardo e vlw por mais essa dica!

  • @ydougx
    @ydougx 6 лет назад +3

    Ótima explicação para um efeito muito bacana pra valorizar nossos projetos web! Valeu Ricardo!

  • @emersoncaricatura
    @emersoncaricatura 3 года назад

    Muito legal o tutorial, vou estudar aplicar em uma ilustração.

  • @bootelho
    @bootelho 5 лет назад

    Muito legal cara, didática ótima. Curti demais que você separou um tempo ainda pra mostrar como fica antes de jogar no keyframe. Abraço!

  • @edelcio.munizwebstudiodesi5533
    @edelcio.munizwebstudiodesi5533 4 года назад

    Parabéns pelo vídeo, explicação simples e fácil.

  • @randomicallyrandom
    @randomicallyrandom 4 года назад

    Muito bom mano, explica bem e é direto ao ponto. Valeuzão!!!!!

  • @daniellucindo531
    @daniellucindo531 4 года назад

    Qual o motivo que fez você deletar o widht e height do svg e colocou x="0px" e y="0px" ?

  • @alexfreitas4428
    @alexfreitas4428 6 лет назад +1

    Parabéns pelo vídeo meu amigo, parabéns. Tô até emocionado 😂

  • @ben-hurfraga5936
    @ben-hurfraga5936 6 лет назад

    Um canal TOP, assisto todos os teus vídeos cara, muito bem explicado. Parabéns!!!

  • @celpascoalx
    @celpascoalx 5 лет назад

    Parabéns, Ricardo !!!!
    Muito elucidativo !!!

  • @carloszetula2307
    @carloszetula2307 6 лет назад

    Caraca, eu não tinha ideia de que era tão fácil! Valeu!

  • @GuilhermeLopesSousaPinto-le8ey
    @GuilhermeLopesSousaPinto-le8ey 4 года назад

    AInda bem que descobri esse canal! muito bom, obrigado pelo video!

  • @williannovais4006
    @williannovais4006 4 года назад

    E como salva todo esse conteúdo em Html e Css para um arquivo somente em formato SVG?

  • @joicealmeida.design
    @joicealmeida.design 2 года назад

    Minha duvida é como salva esse video para colocar nas redes sociais

  • @edinelsonprazer2827
    @edinelsonprazer2827 6 лет назад

    Como sempre, muito bom o tutorial! Parabéns!

  • @higornchagas
    @higornchagas 6 лет назад

    Muito fácil de fazer, obrigado pelo tutorial!

  • @claudiomagalhaes2357
    @claudiomagalhaes2357 4 года назад

    sensacional! parabens

  • @ricardoodonef.s.2907
    @ricardoodonef.s.2907 6 лет назад +1

    Eai meu xará, muito bom o tutorial, ajudou muito! Tenho uma dúvida ou sugestão para um próximo vídeo... Sou UI Designer mas as vezes preciso quebrar o galho de front porém sempre me perco na hora de fazer formulários de contato (só manjo de HTML e CSS não sei nada de PHP) daqueles que cadastrem no banco e dispare email de "notificação" da conversão, assim acabo sempre passando para conhecidos que manjam mais de programação, teria alguma dica para do que eu posso fazer de forma simplificada sem ter que ficar tercerizando essa configuração de formulário?

    • @RicardoSanches
      @RicardoSanches  6 лет назад +2

      Valeu por assistir o canal. Estou preparando um novo curso que acredito que vai te ajudar.
      Estou ralando para tentar lançar este mês. ✌️

    • @ricardoodonef.s.2907
      @ricardoodonef.s.2907 6 лет назад

      Ricardo Sanches boa, agora to ansioso!

  • @fateofferreira29
    @fateofferreira29 6 лет назад

    Muito bom! Adoro o seu canal, sempre com ótimos tutoriais! Mas eu tenho uma pergunta, se eu lançar um site na web com Bootstrap eu tenho que colocar alguma referência no site de que eu usei o mesmo?

    • @RicardoSanches
      @RicardoSanches  6 лет назад +1

      Se eu entendi corretamente sua pergunta, você não precisa não. Valeu por assistir o canal!

  • @CleberSLeite
    @CleberSLeite 5 лет назад

    Muito bem explicado e um ótimo tutorial! Parabéns, vou varrer o canal o/

  • @espritefrai3850
    @espritefrai3850 4 года назад

    Muito Bom!

  • @superbotaobottomup3419
    @superbotaobottomup3419 6 лет назад

    Show de bola

  • @dimensionx3951
    @dimensionx3951 5 лет назад

    Eta dica porreta :]

  • @xDplaysGameplaysTM
    @xDplaysGameplaysTM 5 лет назад

    DEUS TE AMA!

  • @phelipereis
    @phelipereis 5 лет назад

    irado demais !!

  • @lucasxavier382
    @lucasxavier382 5 лет назад

    Nota 1000! :D

  • @kaiquerafael8770
    @kaiquerafael8770 6 лет назад

    Não é mais fácil lançar um gif pronto ?

  • @ben-hurfraga5936
    @ben-hurfraga5936 6 лет назад

    cara eu tenho corel x7 tbm tem como ?

  • @fernandoesteves4177
    @fernandoesteves4177 5 лет назад

    Incrível!

  • @pessoacleiton
    @pessoacleiton 6 лет назад +5

    inkscape

  • @dyogonascimento6150
    @dyogonascimento6150 5 лет назад

    Valeuuuu, me ajudou

  • @levanttaEanda
    @levanttaEanda 5 лет назад

    Ótimo tutorial, mas infelizmente não consegui, não aparece nada!
    O que ficou diferente no meu foi as palavras em vermelho no css, as minhas ficaram brancas.

  • @luiginipote2151
    @luiginipote2151 5 лет назад

    O meu só funciona se eu retirar o "easy-in-out" e mesmo assim fica uma falha no final da animação.

  • @gilsonRodrigocwb
    @gilsonRodrigocwb 6 лет назад

    Muito legal

  • @leandrocandido
    @leandrocandido 6 лет назад

    Quando utilizo o fill="none", o texto desaparece. O que está acontecendo?

    • @aloisiosantos6579
      @aloisiosantos6579 4 года назад

      Usando a propriedade fill="none" no HTML, você remove o preenchimento (cor de fundo) do texto, por isso desaparece.

  • @coelhogleandro
    @coelhogleandro 6 лет назад

    🔝

  • @andersonmp5415
    @andersonmp5415 5 лет назад

    Este efeito vc faz neste site sem nenha programação: maxwellito.github.io/vivus-instant/

  • @sossogamer2014
    @sossogamer2014 6 лет назад

    Me interessei pelo video, assim que vi a camisa do são paulo de fundo fechei o video