仿百度新闻导航栏动画效果

最新推荐文章于 2023-04-16 10:39:57 发布

cataclysm2012

最新推荐文章于 2023-04-16 10:39:57 发布

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： HTML CSS Javascript JQUERY

本文链接：https://blog.csdn.net/cataclysm2012/article/details/79600257

本文介绍了如何仿制百度新闻的导航栏动画效果，通过CSS设置样式，JavaScript处理鼠标进入导航子项时背景选择框的宽度和定位变化，添加动画效果，实现类似导航栏交互体验。详细代码和注意事项已注释在文中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是我做的一个仿百度新闻导航栏的前端效果，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul,li{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.bar{
			/*相对于自身定位*/
			position:relative;
			width: 700px;
			height: 30px;
			line-height: 30px;
			background-color:#e62e00;
			color:white;
			font-size:15px;
			font-weight: bolder;
		}
		.item{
			position: relative;
			display: block;
			float:left;
			text-align: center;
			padding-left:5px;
			padding-right:5px;
			cursor: pointer;
		}
		.item-select{
			background-color:#ff8533;
		}
	</style>
</head>
<body>
	<ul id="bar" class="bar">
		<li id="item-select" class="item-select" style="width:30px;height:30px;position: absolute;"></li>
		<li class="i

最低0.47元/天解锁文章