Cómo crear animación de numeración con efecto de vuelta al pasar el mouse

Aguila SEO · 6 Abr 2020

Buenos días,

Me gustaría que me puedan ayudar como poder hacer esta animación https://comidaperuana.life/sopas/sopa-wantan/ en la parte de los números cuando pasa el mouse se da una vuelta, y si conocen de algún lugar donde tener esos estilos se los agradecería.

muchas gracias

OmarCoder · 6 Abr 2020

Aquí tienes las bases, el truco está en el transition y el transform

HTML:

<style>
    .number{
        width:25px;
        height:25px;
        color:white;
        background:blue;
        border-radius:50%;
        text-align:center;
        line-height:25px;
        transition:transform .3s;
        user-select:none;
    }
    .number:hover{
        transform:rotate(360deg);
    }
</style>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>

Cómo crear animación de numeración con efecto de vuelta al pasar el mouse

Aguila SEO

OmarCoder

Temas similares