网页底部导航答案

【问题标题】：Web bottom navigation网页底部导航
【发布时间】：2019-02-20 06:19:32
【问题描述】：

我一直在关注 Google 开发的 Material 的设计，他们有一个新的底部导航栏，我很想知道它是否可以在网络上存档。

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

Custom shape bottom navigation

【问题讨论】：

发布问题时应附上您可能已经尝试过的任何解决方案。您需要提供一个最小的、可验证的、可重现的示例，以便其他用户可以批评您的尝试并提供反馈。
是的，该栏的某些方面可以看到here

标签： javascript navigation css-shapes

【解决方案1】：

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

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

你可以只使用 :hover 元素作为标准，我只是用它来实现效果:)

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>

【讨论】：