导航栏设计与实现

最新推荐文章于 2024-05-29 12:36:50 发布

xnk_anan

最新推荐文章于 2024-05-29 12:36:50 发布

阅读量718

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/xnk_anan/article/details/121504191

版权

本文展示了如何使用HTML和CSS创建一个包含动态效果的导航栏。通过CSS动画，实现了鼠标悬停时导航项的平移和旋转效果，同时提供了背景颜色变化的过渡效果。代码中详细注释了各个部分的功能，适合初学者学习和实践。

摘要由CSDN通过智能技术生成

直接上代码

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航设计与实验</title>
		<link rel="stylesheet" type="text/css" href="css/导航设计与实现.css"/>
	</head>
	<body>
		<div class="box">
			<div class="pic">
				<img src="img/logo图标图片.png" width="80px" height="80px">
			</div>
			<div class="nav">
				<ul class="list">
					<span class="a1"><li><a href="http://www.cqie.edu.cn/" target="_search"title="点击，进入首页"><img src="img/shouye.png" width="20px" height="20px">首页</a></li></span>
					<span class="a2"><li><a href="http://www.cqie.edu.cn/html/2/content/21/11/38988.shtml"target="_search"title="点击，浏览总榜新闻"><img src="img/xinwen.png" width="15px" height="15px">企业新闻</a></li></span>
					<span class="a3"><li><a href="http://www.cqie.edu.cn/html/xygk/"target="_search" title="点击，查看详情"><img src="img/xiangqingye.png" width="20px" height="20px">详情页</a></li></span>
					<span class="a4"><li><a href="http://www.cqie.edu.cn/html/mhxx/Index.shtml"target="_search"title="点击，友情链接"><img src="img/youqinglianjie%20(1).png" width="15px" height="15px">友情链接</a></li></span>
					<span class="a5"><li><a href="http://www.cqie.edu.cn/html/ggfw/"target="_search"title="点击，联系我们"><img src="img/lianxiwomen.png" width="15px" height="15px">联系我们</a></li></span>
				</ul>
			</div>	
		</div>
	</body>
</html>

css：

*{
    padding: 0;
    margin: 0;
}
.pic:hover img{animation: move1 2s;}
@keyframes move1{
    0%{transform: translate(0,0);}
    50%{transform: translate(0,-50px);opacity: 0;}
    51%{transform: translate(0,30px);opacity: 1;}
    100%{transform: translate(0,0);}
}
.a3:hover li{animation: move2 2s;}
@keyframes move2{
    0%{transform: translate(0,0);}
    50%{transform: translate(-50px,0);opacity: 0;}
    51%{transform: translate(30px,0);opacity: 1;}
    100%{transform: translate(0,0);}
}
.a5:hover li{animation: move3 2s;}
@keyframes move3{
    0%{transform: translate(0,0);}
    50%{transform: translate(0,-50px);opacity: 0;}
    51%{transform: translate(0,30px);opacity: 1;}
    100%{transform: translate(0,0);}
}
.box{
    width: 800px;
    height: 100px;
    background-color: #1C86B2;
    margin: auto;
    transition: background-color 2s ease .5s
}
.box:hover{
    background-color: cornflowerblue;
}
.nav{
    width: 600px;
    height:100px;
    float: left;
    text-align: center;
}
.pic{
    float: left;
    width: 100px;
    height: 80px;
    margin-top: 10px;
    margin-left: 25px;
    cursor: grabbing;
}
.list li{
    float: left; 
    list-style: none;
    display: inline-block;
    margin:0 18px;
    margin-top: 25px;
    height: 50px;
    line-height: 50px;
    width: 80px;
    transition: width 1s linear .5s,background-color 2s ease .5s,height 2s ease-in-out .5s
}
a:link{
    text-decoration: none;
    color: white;
}
a:visited{
    text-decoration: none; 
    color: white;
}
.a1:hover li{
            background-color:#018011; 
            width: 90px;
}
.a2:hover li{     
            transform: rotate(-50deg);
            transform-origin: 50% 50%;
            background-color: darkblue;
}
.a3:hover li{
            background-color: blueviolet
}
.a4:hover li{
            transform: scale(0.5); 
            background-color: darksalmon;
}
.a5:hover li{
            background-color:red; 
            
}

图片可以自己找来替换，每个效果搭配了一些动画属性，不懂的可以学习一下css动画相关内容（transform和translate相关属性）。

部分动画效果：