<!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>
