css给你灵感-纯css箭头可随鼠标移动的导航菜单

wumei2009-09-15 11:54:22

箭头会平滑的跟随鼠标移动，没有使用一丁点JavaScript和gif动画，该运动是纯粹的css制作出来的。

看到下面的菜单链接了吗？在上面移动你的鼠标，从一端到另一端，看看有什么效果。

这个效果是用a:hover选择符翻转效果制作的，a的宽度为10px，这样看起来就有如动画的效果，看不到消失的瞬间。如果你想让它看起来更平滑，可以把导航文字做成图片，放于背景看demo2。

当然这种方式，只是一个实验，并非适合做导航，在这种情况下用Javscript更合适一些。

也可以将这个效果应用到其他的地方，看你的灵感如何了。希望这个css 能给你带来启发。

自由人
Freeren
自由人
Freeren
自由人

html demo1 结构

<div class="crawler-wrap">
 <ul class="crawler">
 <li>
 <a class="link">自由人</a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 <a href="../index.htm"> </a>
 </li>
 <li class="x2">
 <a class="link">Freeren </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x3">
 <a class="link">自由人 </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x4">
 <a class="link">Freeren </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x5">
 <a class="link">自由人 </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x6">
 <a class="link">Freeren </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 </ul>
</div>

html demo2

<div class="crawler-wrap2">
 <ul class="crawler">
 <li>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x2">
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x3">
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x4">
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x5">
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 <li class="x6">
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 <a href="http://www.freeren.org"> </a>
 </li>
 </ul>
</div>

css 代码

.crawler-wrap,.crawler-wrap2{
    clear:both;
}

ul.crawler{
    list-style:none;
    margin:1em 0 1em 0;
    padding:0;
    float:left;
    border:1px solid #000;
}
ul.crawler li {
    position:relative;
    float:left;
    background:#d2da9c;
    z-index:6;
    cursor:pointer;
}
ul.crawler li.x2 {z-index:5}
ul.crawler li.x3 {z-index:4}
ul.crawler li.x4 {z-index:3}
ul.crawler li.x5 {z-index:2}
ul.crawler li.x6 {z-index:1}

ul.crawler li a{
    float:left;
    width:10px;
    height:25px;
    line-height:25px;
    text-decoration:none;
    z-index:2;
    position:relative;
    cursor:pointer;
     background:transparent
}
ul.crawler li a.link{
    width:100px;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
    z-index:0;
    text-decoration:underline;
}
ul.crawler li a:hover span{
    position:absolute;
    width:78px;
    top:-12px;
    left:auto;
    margin-left:-30px;
    z-index:3;
    background:url(images/pointer.gif) no-repeat left top;
}
a:hover{visibility:visible;background:url(images/transparent.gif)}/* ie needs this 如果不加这个背景在，IE下会有闪动的现象，实际图片是不存在的*/

/* demo 2 below */
.crawler-wrap2 ul.crawler {
        background:url(images/crawl-bg.gif) no-repeat left top;
}
.crawler-wrap2 ul.crawler li {
    background:transparent;
}

上一篇：css给你灵感-纯css嵌套列表的树形导航
下一篇：css给你灵感—一个鼠标经过文字的图片翻转效果

发表看法0

>> more 看看其他人的看法

css给你灵感-纯css箭头可随鼠标移动的导航菜单

html demo1 结构

html demo2

css 代码

有什么想说的吗？