Question

我一直在遵循Google开发的Material的设计，并且他们有一个新的底部导航栏，其形状我想知道是否可以在Web上存档。

提前感谢您分享知识。

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

网页底部导航

1 个答案: