导航字体的Css3特效

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

原文链接：https://www.f2er.com/css/456815.html

导航字体的Css3特效

猜你在找的CSS相关文章