QQ 1640076782
如果导航要求有鼠标悬停效果，并且要能动，通常首先想到的就是利用Flash再或者就是JS，纯CSS如何实现呢，来看看下面这套基于 CSS3 的鼠标悬停效果和动画.
实现这个效果的关键是需要引入Hover.css这个css文件， 而且这些效果可以很容易应用到按钮、LOGO 以及其他的网页元素，使用的也都是一些简单的标签，有时候也会使用 before 和 after等 伪元素。但因为使用的是 CSS3 过渡、转换和动画效果，所以目前只支持 Chrome、Firefox 和 Safari 等现代浏览器。
网页源代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Hover.css – A collection of CSS3 powered hover effects</title>
<link href=”css/page.css” rel=”stylesheet” media=”all”>
<link href=”css/hover.css” rel=”stylesheet” media=”all”>
</head>
<body>
<div style=”width:300px; height:800px; padding:50px 0px; magin:0px auto;”>
<a href=”#”>Test Hover.css </a>
</div>
</body>
</html>
这里引入的hover.css是整个效果的关键，page.css可以根据实际需要来做一些调整.
由于hover.css内容过长，就不在这里显示了，有需要的朋友可留言！
效果：
鼠标经过的时候：
当然这里的红色是可以根据实际需求做调整，鼠标只要不移开，这个按钮会一直上下晃动，效果的确是不错的！
xueposter@gmail.com