CSS3圈子变换

Question

我有这个小提琴：https://jsfiddle.net/repoo0fz/ 我有这个css代码：

.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;
}

但转型不是我想要的。当它从半圆形变为完整圆形时看起来很奇怪。它不是从半圆扩展而是从椭圆扩展。我只想要圆圈的后半部分。 我该怎么办？

Answer 1

您可以这样做，将高度转换为所有transition: all 0.5s;：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只是转换高度...您需要将其设置为all或至少设置为所有正在更改的属性

.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>