导航栏是任何网站的主要组件,用户可以通过它浏览网站的所有组件和部分。这就是为什么拥有一个设计良好的导航栏或菜单非常重要的原因。所以今天我们将研究一个导航栏,其中除了悬停元素外,所有元素都变得模糊。
方法:方法是使用 blur()函数和悬停选择器来模糊除悬停元素之外的所有元素。
HTML 代码:在这里,我们创建了一个包含 3 个列表项的简单无序列表。
Blured Menu Design
- Home
- About
- Contact Us
CSS 代码:对于 CSS,请按照以下步骤操作。
- 首先,我们应用了一些背景,并使用 flexbox 以导航栏的形式在无序列表上对齐。
- 然后我们在 ul 上使用了 2 px 模糊的悬停,这使得当我们将鼠标悬停在 ul 上时,每个列表项都会变得模糊。
- 现在我们已经在 li 上使用了悬停,将模糊设置为 0 来取消对悬停列表项的模糊处理。
现在,对于那些不了解它的人,请尝试将两个框可视化。代表 li 的小盒子被包裹在代表 ul 的大盒子里。现在我们在 ul 上的第一个悬停选择使整个 li 变得模糊,因为我们还没有进入较小的框边界,当我们进入较小框的边界时,我们激活了 li 的悬停选择,这使得悬停的列表项不模糊.
body{ background: green; font-family:Arial, Helvetica, sans-serif; } ul{ position: absolute; top:40%; left:40%; display: flex; } ul li{ list-style: none; position: relative; display: block; margin: 10px; } ul:hover li{ opacity: .2; filter: blur(2px); } ul li:hover{ opacity: 1; filter:blur(0px); }
完整代码:是以上两个代码的组合。
Blured Menu Design - Home
- About
- Contact Us
输出: