Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我的问题是如果侧边栏没有悬停，如何制作凹面动画？所以在它徘徊并且指针再次不在侧边栏中之后，它将回到初始状态，但是使用凹面动画，我不能使用负百分比，那么我可以使用它呢？感谢

Answer 1

我想您必须使用 SVG 创建一个普通的正方形然后两个

动画第一个是圆角，然后第二个是

凹角。

Answer 2

也许我误解了这个问题，但你不能只在div上放置相同的动画（没有：悬停）。像这样：

.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;
  animation-name: roundborder2;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

.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; }
}
@keyframes roundborder2 {
    0%   { border-radius: 0; }
    50%  { border-radius: 0 50% 50% 0; }
    100% { border-radius: 0; }
}

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

如何用CSS制作凹面动画

2 个答案: