html - 如何制作洪水填充翻转按钮？

Question

我有一个简单的作业网页。它每周都有滚动按钮​​，它们会在鼠标悬停时改变颜色。很老了!

现在这不是广告，我与他们无关，除了我偶尔玩乐透 here . (只是为了显示按钮。)

他们与西类牙当局发生了问题，并离线了一段时间。现在他们又回来了，有很酷的翻滚按钮，可以淹没。

我的网页非常简单，但我有滚动按钮​​，就像链接中一样。

谁能给我一个关于如何完成的指针、链接和提示？

Answer 1

您需要使用 :after 元素并在 :hover 上转换它的 height。

z-index 将确保您的颜色位于框内内容的后面。

我在这里为您创建了一个示例:

li {
  position: relative;
  border: 1px solid lightgrey;
  height: 100px;
  width: 100px;
}

li a {
  z-index: 20; /*this will keep your content above the colour*/
  position: relative;
}

li:after {
  z-index: 10; /*this will keep your colour behind the content*/
  background-color: #bf1f1f;
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 5px;
  width: 100%;
  transition: height .3s; /*creates smooth animation*/
}

li:hover:after {
  height: 100%; /*toggling the height to 100% on hover of the box*/
}

<li><a href="/">Example List Item</a></li>

这是一个包含多个元素的示例:

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  border: 1px solid lightgrey;
  height: 100px;
  width: 100px;
}

li a {
  z-index: 20;
  /*this will keep your content above the colour*/
  position: relative;
}

li:after {
  z-index: 10;
  /*this will keep your colour behind the content*/
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 5px;
  width: 100%;
  transition: height .3s;
  /*creates smooth animation*/
}

li:hover:after {
  height: 100%;
  /*toggling the height to 100% on hover of the box*/
}

li:nth-child(1):after {
  background-color: #c50202;
}

li:nth-child(2):after {
  background-color: #4444de;
}

li:nth-child(3):after {
  background-color: #279027;
}

li:nth-child(4):after {
  background-color: #e07832;
}

li:nth-child(5):after {
  background-color: #c50202;
}

li:nth-child(6):after {
  background-color: #4444de;
}

li:nth-child(7):after {
  background-color: #279027;
}

<ul>
  <li><a href="/">Example List Item</a></li>
  <li><a href="/">Example List Item</a></li>
  <li><a href="/">Example List Item</a></li>
  <li><a href="/">Example List Item</a></li>
  <li><a href="/">Example List Item</a></li>
  <li><a href="/">Example List Item</a></li>
  <li><a href="/">Example List Item</a></li>
</ul>