如何使用 CSS 创建动画模糊导航栏？

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

方法：方法是使用 blur()函数和悬停选择器来模糊除悬停元素之外的所有元素。

HTML 代码：在这里，我们创建了一个包含 3 个列表项的简单无序列表。

    
    
    


    

        
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);
  }
  

  完整代码：是以上两个代码的组合。

  
  
  
      
      
      
  
    
    
  
  
      
  
          
  Home
          
  About
          
  Contact Us
      
  
  
  

  输出：