Ben CSS3 animasyonları için oldukça yeni dairenin

Question

genişliğini Expand vurgulu üzerinde

, ben 'la Bu resimdeki gibi bir geçiş ile, bir hap şeklinde yapma daire genişliğini genişletmek:

Bu Ben denedim.

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

 
.logo:hover { 
 
    width: 300px; 
 
}

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

Answer 1

sadece (bütün birimler here listelenmiştir) oranından daha başka bir birime sınır yarıçap değerini değiştirmek gerekir: Sorun genişliği gibi bir elips için çevre geçişleri genişler olmasıdır . Bunun nasıl çalıştığı ve bu birimleri istenen çıktı için neden kullanmanız gerektiğine ilişkin bir açıklama için bkz. Border-radius in percentage (%) vs pixels (px).

px ile örnek. daire fareyle üzerine hap şekline genişler: çember onun hap tutar böylece çemberin yüksekliğini bilmiyorsanız

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

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

, çok yüksek bir değere ayarlayabilirsiniz genişlik olarak şekil genişletir:

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

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