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

【如何使用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 = "http://www.srcmini.com/#"> Home< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> Contribute< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> Careers< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> About Us< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> 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 = "http://www.srcmini.com/#"> Home< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> Contribute< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> Careers< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> About Us< /a> < /li> < li> < a href = "http://www.srcmini.com/#"> Contact< /a> < /li> < /ul> < /body> < /html>

输出如下：