JQUERY CSS3实现鼠标悬停导航条动画特效代码下载


JQUERY CSS3实现鼠标悬停导航条动画特效代码下载
JQUERY CSS3实现鼠标悬停导航条动画特效代码下载以及鼠标悬停、导航条动画等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/style.js"></script>

3. HTML代码

		<div class="content">
<!--第一种效果-->
			<div class="header">
				<ul class="header-cell">
					<li class="header-cell-li">
						<a class="header-cell-li-tittle active"><span class='ink'></span>HOME</a>
					</li>
					<li class="header-cell-li">
						<a class="header-cell-li-tittle"> <span class='ink'></span>NEWS</a>
					</li>
					<li class="header-cell-li">
						<a class="header-cell-li-tittle"> <span class='ink'></span>LIST</a>
					</li>
					<li class="header-cell-li">
						<a class="header-cell-li-tittle"><span class='ink'></span>PRODUCT</a>
					</li>
					<li class="header-cell-li">
						<a class="header-cell-li-tittle"><span class='ink'></span>ABOUT</a>
					</li>
				</ul>
			</div>
<!--第一种效果-->
<!--第二种效果-->
			<div class="nav_shake">
				<ul class="nav_shake_table">
					<li class="nav_shake_table_cell">
						<a class="nav_shake_table_cell_link">
							<span class="shake">HOME</span>
						</a>
					</li>
					<li class="nav_shake_table_cell">
						<a class="nav_shake_table_cell_link">
							<span class="shake">NEWS</span>
						</a>
					</li>
					<li class="nav_shake_table_cell">
						<a class="nav_shake_table_cell_link">
							<span class="shake">LIST</span>
						</a>
					</li>
					<li class="nav_shake_table_cell">
						<a class="nav_shake_table_cell_link">
							<span class="shake">PRODUCT</span>
						</a>
					</li>
					<li class="nav_shake_table_cell">
						<a class="nav_shake_table_cell_link">
							<span class="shake">ABOUT</span>
						</a>
					</li>
				</ul>
			</div>
<!--第二种效果-->
<!--第三种效果-->
			<div class="nav">
				<ul class="nav_table">
					<li class="nav_table_cell">
						<a class="nav_table_cell_link">
							<span></span> HOME
						</a>
					</li>
					<li class="nav_table_cell  nav_active">
						<a class="nav_table_cell_link">
							<span></span> NEWS
						</a>
					</li>
					<li class="nav_table_cell">
						<a class="nav_table_cell_link">
							<span></span> LIST
						</a>
					</li>
					<li class="nav_table_cell">
						<a class="nav_table_cell_link">
							<span></span> PRODUCT
						</a>
					</li>
					<li class="nav_table_cell">
						<a class="nav_table_cell_link">
							<span></span> ABOUT
						</a>
					</li>
				</ul>
			</div>
<!--第三种效果-->
		</div>

相关推荐

发表评论

相关文章