将淡入淡出应用于html组件的边缘区域

Question

以下是html和css的示例代码：

HTML

<nav>...</nav>
<div class="row"></div>

CSS

.nav{
    margin-bottom: 10px;
}

我想在导航栏的下边缘逐渐淡化效果。

请帮忙。需要设置什么css属性才能执行此操作？

Answer 1

如果你的导航背景是纯色（或“褪色”部分是一种颜色），你可以添加一个带有背景渐变的::after伪元素来模拟淡出的颜色。

Here is a demo如何做到这一点。

Answer 2

如果要在CSS上添加淡化效果，可以使用从0到1的opacity属性。然后，您必须将此属性与另一个名为transition的属性耦合。要创建过渡效果，您必须指定两件事：

• 要添加效果的CSS属性。在您的情况下，它是opacity。
• 效果的持续时间

因此，您可以尝试使用这样的CSS来更改导航的不透明度：

.nav
{
  opacity : 1;
  margin-bottom: 10px;
  transition : opacity 2s;
}

如果您了解JQuery，则可以使用fading in/out effect进行特殊功能。

希望它会对你有所帮助。