个性化阅读
专注于IT技术分析

如何使用HTML和CSS创建具有悬停效果的动画导航栏?

导航栏或导航栏或菜单栏是任何Web或移动应用程序中最重要的组件。用户只能通过此菜单从一页导航到另一页。通常在网站顶部提供它, 以提供更好的UX(用户体验)。

方法:方法是先创建导航栏, 然后使用之前和徘徊选择器。

HTML代码:在本节中, 我们使用unordered-list(ul)创建了一个简单的导航栏菜单。

<!DOCTYPE html>
<html lang = "en">
  
<head>
     <meta charset = "UTF-8">
     <meta name = "viewport" content =
         "width=device-width, initial-scale=1.0">
     <title>Animated Navbar </title>
</head>
  
<body>
     <h1>srcmini</h1>
  
     <h3>Animated Navigation Bar Design</h3>
     <ul>
         <li><a href = "#">Home</a></li>
         <li><a href = "#">Contribute</a></li>
         <li><a href = "#">Careers</a></li>
         <li><a href = "#">About Us</a></li>
         <li><a href = "#">Contact</a></li>
     </ul>
</body>
  
</html>

CSS代码:在本节中, 我们使用了一些CSS属性来制作精美的动画导航栏。

  • 第1步:首先, 我们使用flex属性以水平方式对齐列表。
  • 第2步:然后删除所有文本装饰并提供所需的边距和填充。
  • 第三步:然后, 我们在选择器之前使用, 在每个元素下方对齐一条线, 将其宽度保持为0。
  • 步骤4:现在, 将鼠标悬停在before选择器上可为线条提供宽度, 并在x轴上对其进行变换以获得所需的效果。
<style>
     body {
         margin : 0 ;
         padding : 0 ;
         font-family : Arial , Helvetica , sans-serif ;
     }
  
     h 1 {
         color : green ;
     }
  
     h 1 , h 3 {
         text-align : center ;
     }
  
     ul {
         margin : 0 10% ;
         padding : 10px 0px 10px 100px ;
         display : flex;
         background : green ;
     }
  
     ul li {
         list-style : none ;
         padding : 10px 20px ;
  
     }
  
     ul li a {
         text-decoration : none ;
         font-size : 24px ;
         font-weight : bold ;
         color : black ;
         position : relative ;
  
     }
  
     ul li a::before {
         content : "" ;
         width : 0px ;
         height : 10px ;
         background : black ;
         position : absolute ;
         top : 100% ;
         left : 0 ;
         transition: . 5 s;
     }
  
     ul li a:hover::before {
         width : 50% ;
         transform: translateX( 100% );
     }
</style>

完整的代码:在本部分中, 我们将结合以上两个部分来创建动画导航栏。

<!DOCTYPE html>
<html lang = "en">
  
<head>
     <meta charset = "UTF-8">
     <meta name = "viewport" content =
         "width=device-width, initial-scale=1.0">
     <title>Animated Navbar </title>
  
     <style>
         body {
             margin: 0;
             padding: 0;
             font-family: Arial, Helvetica, sans-serif;
         }
  
         h1 {
             color: green;
         }
  
         h1, h3 {
             text-align: center;
         }
  
         ul {
             margin: 0 10%;
             padding: 10px 0px 10px 100px;
             display: flex;
             background: green;
         }
  
         ul li {
             list-style: none;
             padding: 10px 20px;
  
         }
  
         ul li a {
             text-decoration: none;
             font-size: 24px;
             font-weight: bold;
             color: black;
             position: relative;
  
         }
  
         ul li a::before {
             content: "";
             width: 0px;
             height: 10px;
             background: black;
             position: absolute;
             top: 100%;
             left: 0;
             transition: .5s;
         }
  
         ul li a:hover::before {
             width: 50%;
             transform: translateX(100%);
         }
     </style>
</head>
  
<body>
     <h1>srcmini</h1>
  
     <h3>Animated Navigation Bar Design</h3>
     <ul>
         <li><a href = "#">Home</a></li>
         <li><a href = "#">Contribute</a></li>
         <li><a href = "#">Careers</a></li>
         <li><a href = "#">About Us</a></li>
         <li><a href = "#">Contact</a></li>
     </ul>
</body>
  
</html>

输出如下:

如何使用HTML和CSS创建具有悬停效果的动画导航栏?1

赞(0) 打赏
未经允许不得转载:srcmini » 如何使用HTML和CSS创建具有悬停效果的动画导航栏?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏