css美化导航栏

最新推荐文章于 2024-07-25 15:29:26 发布

若节

最新推荐文章于 2024-07-25 15:29:26 发布

阅读量7.1k

点赞数 5

分类专栏： java Html+CSS 文章标签： Css美化导航栏导航栏的制作

本文链接：https://blog.csdn.net/qq_33665647/article/details/52890250

版权

java 同时被 2 个专栏收录

167 篇文章 0 订阅

订阅专栏

Html+CSS

21 篇文章 0 订阅

订阅专栏

做出来的导航栏有动态效果，很好看。

6.html

<!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=gb2312" />
<title>经典导航</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>
<div id="nav">
<ul class="sonarmenu">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.cssdrive.com">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript</a></li>
</ul>
</div>

</body>
</html>

css.css

<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>

<style>

ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
	list-style: none;
}

ul.sonarmenu li{
 display: inline;
}

ul.sonarmenu a{
	position: relative;
	display: inline-block;
	color: black; /* font color */
	text-decoration: none;
	margin: 10px 20px;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
	font-size: 22px; /* font size */
	letter-spacing: 2px; /* letter spacing */
	border-bottom: 2px solid transparent; /* Bottom border style */
}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
	outline: none;
	border-bottom: 2px solid #eee; /* Bottom border style on hover */
}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px; /* width of outer circle */
	height: 70px; /* height of outer circle */
	border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
	width: 60px; /* width of inner circle */
	height: 60px; /* width of inner circle */
	border-width: 6px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
	-webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
	-moz-animation: pulsate 1.2s infinite;
	-ms-animation: pulsate 1.2s infinite;
	animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{

  30%{
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-moz-keyframes pulsate{

  30%{
	opacity: 1;
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-ms-keyframes pulsate{

  30%{
	opacity: 1;
	-ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-keyframes pulsate{

  30%{
	opacity: 1;
	transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

</style>

直接抄代码就好，用的时候，只需要把 <link rel="stylesheet" type="text/css" href="css.css"/>加进去，然后再加上

<div id="nav">
<ul class="sonarmenu">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.cssdrive.com">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript</a></li>
</ul>
</div>

记得把链接和链接的名称一改，就好。