Como fazer isso??

  • Autor Autor andifc
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
andifc

andifc

Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Me he fijado que en la parte del menú de foro beta veo una animación en tendencia quisiera saber como se hace?
 

Anexos

  • imagen_2022-05-03_191552568.webp
    imagen_2022-05-03_191552568.webp
    1,1 KB · Visitas: 49
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Me he fijado que en la parte del menú de foro beta veo una animación en tendencia quisiera saber como se hace?
es animación CSS para ser mas específicos.
ahora tendrías que hacerlo con un icono o un svg y acomodarlo de acuerdo a tus necesidades.

CSS:
.p-navEl a[data-nav-id='tendencia']:before {
    color: #F8665E;
    content: "\f7e4";
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
}
a[data-nav-id='tendencia']:before {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
 
tenia la misma duda
 
Voltar
Topo