- <!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>
来源: http://www.phpxs.com/code/1006030/