css3突出显示动画导航

最新推荐文章于 2022-07-27 19:07:32 发布

elegancy_

最新推荐文章于 2022-07-27 19:07:32 发布

阅读量702

点赞数

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>css3突出显示动画导航</title>
		<style>
			* { 
				/* Basic CSS reset */
				margin:0; 
				padding:0;
			}

			body {
				/* These styles have nothing to do with the ribbon */
				background:#000;
				padding:35px 0 0;
				margin:auto;
				text-align:center;
			}

			.ribbon {
				display:inline-block;
			}

			.ribbon:after, .ribbon:before {
				margin-top:0.5em;
				content: "";
				float:left;
				border:1.5em solid #fff;
			}

			.ribbon:after {
				border-right-color:transparent;
			}

			.ribbon:before {
				border-left-color:transparent;
			}

			.ribbon a:link, .ribbon a:visited { 
				color:#000;
				text-decoration:none;
			    float:left;
			    height:3.5em;
				overflow:hidden;
			}

			.ribbon span {
				background:#fff;
				display:inline-block;
				line-height:3em;
				padding:0 1em;
				margin-top:0.5em;
				position:relative;

				-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
				-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
				-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
				-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
				transition: background-color 0.2s, margin-top 0.2s;
			}

			.ribbon a:hover span {
				background:#FFD204;
				margin-top:0;
			}

			.ribbon span:before {
				content: "";
				position:absolute;
				top:3em;
				left:0;
				border-right:0.5em solid #9B8651;
				border-bottom:0.5em solid #fff;
			}

			.ribbon span:after {
				content: "";
				position:absolute;
				top:3em;
				right:0;
				border-left:0.5em solid #9B8651;
				border-bottom:0.5em solid #fff;
			}

		</style>
	</head>
	<body>
	<br><br><br><br><br><br><br><br><br>
		<div class='ribbon'>
			<a href='#'><span>Home</span></a>
			<a href='#'><span>About</span></a>
			<a href='#'><span>Services</span></a>
			<a href='#'><span>Contact</span></a>
		</div>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<div style="text-align:center;clear:both">
<p><font color="#FFFFFF">适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</font></p><br>
<p><font color="#FFFFFF">来源：</font><a href="http://www.52dvd.com/" target="_blank"><font color="#FFFFFF">52dvd素材网</font></a></p>
</div>
	</body>
</html>

效果图：

elegancy_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3突出显示动画导航

css3突出显示动画导航 * { /* Basic CSS reset */ margin:0; padding:0; } body { /* These styles have nothing to do with the ribbon */ background:#000; padding:35px 0 0;
复制链接

扫一扫