चक्र

Question

की चौड़ाई का विस्तार करें मैं बहुत CSS3 के एनिमेशन के लिए नया हूँ करने के लिए मैं क्या आप जानते हैं कैसे करना है के बाद एक करना चाहते हैं: मैं एक जादूगरनी है:,

मंडराना पर मैं 'करना चाहते हैं इस छवि में की तरह एक गोली आकार में बना एक संक्रमण के साथ चक्र की चौड़ाई का विस्तार:

यह मैंने कोशिश की है।

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

 
.logo:hover { 
 
    width: 300px; 
 
}

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

Answer 1

तुम बस (सूचीबद्ध सभी इकाइयों here) प्रतिशत की तुलना में किसी अन्य इकाई के लिए बॉर्डर-त्रिज्या मूल्य को बदलने की जरूरत: मुद्दा यह है कि चौड़ाई के रूप में एक अंडाकार को वृत्त संक्रमण फैलता है । यह कैसे काम करता है और वांछित आउटपुट के लिए इन इकाइयों का उपयोग करने की आवश्यकता के स्पष्टीकरण के लिए, Border-radius in percentage (%) vs pixels (px) देखें।

पीएक्स के साथ उदाहरण। चक्र हॉवर पर एक गोली आकार के लिए विस्तारित:

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

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

यदि आप चक्र की ऊंचाई पता नहीं है, तो आप एक बहुत ही उच्च मूल्य निर्धारित कर सकते हैं चक्र अपनी गोली रहता है चौड़ाई के रूप में आकार का विस्तार:

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

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