📌  相关文章
📜  如何使用 CSS 创建动画模糊导航栏?

📅  最后修改于: 2021-08-30 12:58:12             🧑  作者: Mango

导航栏是任何网站的主要组件,用户可以通过它浏览网站的所有组件和部分。这就是为什么拥有一个设计良好的导航栏或菜单非常重要的原因。所以今天我们将研究一个导航栏,其中除了悬停元素外,所有元素都变得模糊。

方法:方法是使用 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
    •     

    输出: