Mở rộng độ rộng của vòng tròn

Question

Tôi khá mới để hình ảnh động CSS3 để tôi muốn biết bạn làm thế nào để làm một sau: Tôi có một Circe:

On di chuột, tôi 'd như để mở rộng độ rộng của vòng tròn làm cho nó thành một hình dạng viên thuốc với một sự chuyển tiếp như trong hình ảnh này:

này là những gì tôi đã thử. Vấn đề là các hiệu ứng chuyển tiếp vòng tròn để một hình elip như chiều rộng mở rộng:

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

 
.logo:hover { 
 
    width: 300px; 
 
}

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

Answer 1

Bạn chỉ cần thay đổi giá trị border-radius cho bất kỳ đơn vị khác hơn là tỷ lệ phần trăm (tất cả các đơn vị niêm yết here) . Để có giải thích về cách thức hoạt động và lý do bạn cần sử dụng các đơn vị này cho đầu ra mong muốn, hãy xem Border-radius in percentage (%) vs pixels (px).

Ví dụ với px. Vòng tròn mở rộng ra một hình dạng viên thuốc trên di chuột:

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

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

Nếu bạn không biết chiều cao của vòng tròn, bạn có thể đặt một giá trị rất cao nên các vòng tròn giữ thuốc của nó hình như chiều rộng mở rộng:

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

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