Expand larghezza del cerchio

Question

Sono abbastanza nuovo per le animazioni CSS3 per mi piacerebbe sapere come fare la seguente: Ho un circe:

al passaggio del mouse, ho 'd come per ampliare la larghezza del cerchio farne una forma pillola con una transizione come in questa immagine:

questo è quello che ho provato Il problema è che le transizioni cerchio ad un'ellisse come larghezza espande:

.logo { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    transition: width 2s; 
 
} 
 

 
.logo:hover { 
 
    width: 300px; 
 
}

<div class="logo"></div>

Answer 1

È solo necessario cambiare il valore border-radius a qualsiasi altra unità di percentuale (tutte le unità incluso here) . Per una spiegazione di come funziona e perché è necessario utilizzare queste unità per l'output desiderato, vedere Border-radius in percentage (%) vs pixels (px).

Esempio con px. Il cerchio si espande in una forma di pillola al passaggio del mouse:

.logo { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50px; 
 
    background: red; 
 
    transition: width 2s; 
 
} 
 
.logo:hover { 
 
    width: 300px; 
 
}

<div class="logo"></div>

Se non si conosce l'altezza del cerchio, è possibile impostare un valore molto elevato in modo che il cerchio mantiene la sua pillola forma del larghezza espande:

.logo { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 999px; 
 
    background: red; 
 
    transition: width 2s; 
 
} 
 
.logo:hover { 
 
    width: 400px; 
 
}

<div class="logo"></div>