Como hacer eso??

  • Autor Autor andifc
  • Fecha de inicio Fecha de inicio
andifc

andifc

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Me he fijado que en la parte del menú de foro beta veo una animación en tendencia quisiera saber como se hace?
 

Adjuntos

  • imagen_2022-05-03_191552568.webp
    imagen_2022-05-03_191552568.webp
    1,1 KB · Visitas: 49
¿Te sirvió? Únete a la conversación

Con tu cuenta gratis puedes responder, escribirle al autor por mensaje privado y comprar con Saldo retenido: el pago se libera cuando recibes lo acordado.

Toma 30 segundos · vuelves a este tema al 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
 
Atrás
Arriba