如何在css中制作过渡椭圆

So, I have sidebar that just display some of its content, when it hovered it will display all the sidebar width.

所以，我有侧边栏只显示它的一些内容，当它悬停时它将显示所有侧边栏宽度。

this is the CSS code:

这是CSS代码：

.sidenav {
    height: 100%;
    width: 100px;
    position: fixed; 
    z-index: 2;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden; 
    padding-top: 20px;
    transition: 0.8s;
    -webkit-transition: 0.8s;
    opacity: 0.8;
    box-shadow: 0px 20px 50px black; 
} 
.sidenav:hover{
    width: 215px;
    transition: 0.8s;
    -webkit-transition: 0.8s;
    overflow: hidden;
}

my question is how to make the transition of my sidebar become ellipse first then display the full width. thanks before

我的问题是如何使我的侧边栏的过渡首先变为椭圆，然后显示全宽。谢谢你

this is the illustration:

这是插图：

1 个解决方案

#1

You cannot achieve this with only a simple transition effect. You will need to use CSS keyframe animations to achieve a border radius only on the width transition:

只有简单的过渡效果才能实现这一点。您将需要使用CSS关键帧动画来仅在宽度过渡上实现边框半径：

.sidenav {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
  padding-top: 20px;
  transition: 0.8s;
  opacity: 0.8;
  box-shadow: 0px 20px 50px black;
  border-radius: 0;
  background: black;
}

.sidenav:hover {
  width: 215px;
  overflow: hidden;
  animation-name: roundborder;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes roundborder {
    0%   { border-radius: 0; }
    50%  { border-radius: 0 50% 50% 0; }
    100% { border-radius: 0; }
}

<div class="sidenav"></div>

Of course you need proper vendor prefixes for older browser support. See border-radius on MDN for more information.

当然，您需要适当的供应商前缀来支持旧浏览器。有关详细信息，请参阅MDN上的border-radius。

#1