CSS3 Kreis Umwandlung

Question

Ich habe diese Geige: https://jsfiddle.net/repoo0fz/ Ich habe diesen CSS-Code:

.menubutton{ 
    height:90px; 
    width:180px; 
    border-radius: 180px 180px 0 0; 
    -moz-border-radius: 180px 180px 0 0; 
    -webkit-border-radius: 180px 180px 0 0; 
    float:left; 
padding:0px; 
margin-left:5px; 
margin-bottom:0px; 
font-family:courier new; 
font-size:20px; 
    -webkit-transition: height 0.5s; /* Safari */ 
    -webkit-transition-delay: 0s; /* Safari */ 
    transition: height 0.5s; 
    transition-delay: 0s; 
    line-height: 90px; 
    text-align:center; 
    border: 1px solid white; 
} 
.menubutton:hover{ 
    height:180px; 
    border-radius: 180px 180px; 
    -moz-border-radius: 180px 180px; 
    -webkit-border-radius: 180px 180px; 
} 

Aber die Transformation ist nicht, wie ich will. Es sieht komisch aus, wenn es von einem Halbkreis zu einem vollständigen Kreis geht. Es erweitert sich nicht von einem Halbkreis, sondern eher von einem Ovalkreis. Ich will nur die letzte Hälfte des Kreises. Was kann ich tun?

Answer 1

Sie können es so machen, an alle transition: all 0.5s; den Übergang von der Höhe ändert:

.menubutton { 
 
    height: 90px; 
 
    width: 180px; 
 
    border-radius: 180px 180px 0 0; 
 
    -moz-border-radius: 180px 180px 0 0; 
 
    -webkit-border-radius: 180px 180px 0 0; 
 
    float: left; 
 
    padding: 0px; 
 
    margin-left: 5px; 
 
    margin-bottom: 0px; 
 
    font-family: courier new; 
 
    font-size: 20px; 
 
    -webkit-transition: all 0.5s; 
 
    /* Safari */ 
 
    -webkit-transition-delay: 0s; 
 
    /* Safari */ 
 
    transition: all 0.5s; 
 
    transition-delay: 0s; 
 
    line-height: 90px; 
 
    text-align: center; 
 
    border: 1px solid white; 
 
} 
 
.menubutton:hover { 
 
    height: 180px; 
 
    border-radius: 180px 180px; 
 
    -moz-border-radius: 180px 180px; 
 
    -webkit-border-radius: 180px 180px; 
 
}

<div class="menubutton" style="background:#46B29D;">Menu1</div> 
 
<div class="menubutton" style="background:#F0CA4D;">Menu2</div> 
 
<div class="menubutton" style="background:#E37B40;">Menu3</div>

Answer 2

Sie nur die Höhe der Umstellung ... Sie müssen das auf all oder zumindest auf alle Eigenschaften, die ändern

.menubutton { 
 
    height: 90px; 
 
    width: 180px; 
 
    border-radius: 180px 180px 0 0; 
 
    -moz-border-radius: 180px 180px 0 0; 
 
    -webkit-border-radius: 180px 180px 0 0; 
 
    float: left; 
 
    padding: 0px; 
 
    margin-left: 5px; 
 
    margin-bottom: 0px; 
 
    font-family: courier new; 
 
    font-size: 20px; 
 
    -webkit-transition: all 0.5s; 
 
    /* Safari */ 
 
    -webkit-transition-delay: 0s; 
 
    /* Safari */ 
 
    transition: all 0.5s; 
 
    transition-delay: 0s; 
 
    line-height: 90px; 
 
    text-align: center; 
 
    border: 1px solid white; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.menubutton:hover { 
 
    height: 180px; 
 
    border-radius: 180px 180px; 
 
    -moz-border-radius: 180px 180px; 
 
    -webkit-border-radius: 180px 180px; 
 
}

<div class="menubutton" style="background:#46B29D;">Menu1</div> 
 
<div class="menubutton" style="background:#F0CA4D;">Menu2</div> 
 
<div class="menubutton" style="background:#E37B40;">Menu3</div>