Web底部导航

Question

我一直在关注谷歌开发的材料的设计，他们有一个新的底部导航栏，其形状我很想知道是否可以在网上存档。

提前感谢您分享您的知识。

Custom shape bottom navigation

Answer 1

您将需要使用一些技巧来实现这一点，但是您应该真正发布尝试以了解如何修改您的尝试。

这里我使用了：before和：after伪元素在底部元素上创建曲线，并使用红色边框颜色来创建形状。

您可以使用：悬停元素作为标准，我只是用它来实现效果:)

html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: red;
  position: relative;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  transition: all 0.4s;
  background: white;
}

.circle {
  position: absolute;
  top: -50px;
  transition: all 0.4s;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
  background: transparent;
  border: 5px solid red;
  border-radius: 50%;
}

body:hover .bottom:before,
body:hover .bottom:after {
  bottom: 100%;
}

.bottom:before,
.bottom:after {
  content: "";
  transition: all 0.4s;
  position: absolute;
  bottom: calc(100% - 20px);
  width: calc(50% - 30px);
  height: 20px;
  background: white;
}

.bottom:before {
  border-radius: 0 20px 0 0;
  left: 0;
}

.bottom:after {
  border-radius: 20px 0 0 0;
  right: 0;
}

body:hover .circle {
  top: 0;
  background: white;
}

body:hover .bottom {
  height: 100px;
}

body:hover .circle:hover {
  background: gold;
  cursor: pointer;
}

<div class="bottom">
  <div class="circle"></div>
</div>