导航字体的Css3特效

2015/12/14 33783

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!DOCTYPE html>
<html>
<head>
<title>导航字体的Css3特效</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> 
.top-nav ul li{
	display: inline-block;
}
.top-nav ul li a {
	position: relative;
	display: inline-block;
	margin: 0 2em 0 0;
	outline: none;
	color: #838383;
	text-decoration: none;
	letter-spacing: 5px;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.25em;
}
.top-nav ul li a::before {
	color: #000;
	content: attr(data-hover);
	position: absolute;
	opacity: 0;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}
.top-nav ul li a:hover::before,
.top-nav ul li a:focus::before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
}
.top-nav ul li.active a {
	color:#000;
}
</style> 
<div class="top-nav">
	<span class="menu"></span>
	<ul>
		<li class="active" ><a href="index.html" >SWIMWEAR</a> </li>
		<li><a href="men.html" data-hover="中国" >中国</a></li>
		<li><a href="men.html" data-hover="美国"> 美国 </a></li>
		<li><a href="men.html" data-hover="BRIEFS"> BRIEFS1</a></li>
		<li><a href="men.html" data-hover="SLEEP">SLEEP </a></li>
		<li><a href="men.html" data-hover="THONGS">THONGS </a></li>
	</ul> 
</div>