简单的玻璃材质导航栏

最新推荐文章于 2022-04-29 09:08:06 发布

blue7wings

最新推荐文章于 2022-04-29 09:08:06 发布

阅读量801

点赞数

分类专栏： javascript&html 文章标签：导航栏滑动门

本文链接：https://blog.csdn.net/blue7wings/article/details/8239876

版权

javascript&html 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

效果

code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>玻璃特效的导航菜单</title>
<style type="text/css">
body{
	margin:0;
	margin-top:20px;
	}
ul#menu{
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	background-image:url(images/under.gif);
	padding:0 0 0 8px;
	list-style:none;
	height:35px;
	}
#menu li{
	float:left;
	}
 a{
	display:block;
	line-height:35px;
	color:#ddd;
	text-decoration:none;
	padding:0 0 0 10px;
	}
a:hover{
	color:#fff;
	background-image:url(images/hover.gif);
	}
a:hover strong{
	color:#fff;
	background:url(images/hover.gif) no-repeat right top ;
	}
strong{
	display:block;
	padding:0 10px 0 0;
	}
</style>
</head>

<body>
<ul id="menu">
<li><a href="#1"><strong>主页</strong></a></li>
<li><a href="#1"><strong>科技频道</strong></a></li>
<li><a href="#1"><strong>时尚频道</strong></a></li>
<li><a href="#1"><strong>教育频道</strong></a></li>
</ul>
</body>
</html>

分析

我觉得最重要的还是,a:hover{....}和a:hover strong{....}刚刚看,可能有怀疑,为什么要用两个background-image?我们来试试删掉a:hover{....}试试.

效果:

我们再来只删掉a:hover strong{....}试试.

我们可以很明显的发现只有一个标签的话,一侧的切口太明显,这是图片本身导致的,我们可以使用滑动门的技术来解决.也就是两个标签的图片相互叠加,这样就会把切口叠加掉.

blue7wings

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的玻璃材质导航栏

效果code玻璃特效的导航菜单body{ margin:0; margin-top:20px; }ul#menu{ font-family:Arial, Helvetica, sans-serif; font-size:17px; background-image:url(images/under.gif); padding:0 0 0 8px; li
复制链接

扫一扫

专栏目录