css3创建导航链接效果

css3创建导航链接效果

发布时间：2013-08-22编辑：杨青阅读（1009）

分享一些常用和创意的导航链接效果。例子中鼠标悬停使用伪元素和动画来创建一个微妙和有现代节奏感的链接效果。

注意，伪元素并不是在所有的浏览器都能兼容。使用Chrome和Firefox浏览器观看，效果最佳。

演示 下载

在大多数情况下，创建一个简单的链接导航如下html：

<nav class="cl-effect-13">

    <a href="#">Beleaguer</a>

    <a href="#">Lassitude</a>

    <a href="#">Murmurous</a>

    <a href="#">Palimpsest</a>

    <a href="#">Assemblage</a>

</nav>

但对于一些特殊的效果，我们可能会在伪元素中使用重复的链接文字：

<nav class="cl-effect-11">

    <a href="#" data-hover="Desultory">Desultory</a>

    <a href="#" data-hover="Sumptuous">Sumptuous</a>

    <a href="#" data-hover="Scintilla">Scintilla</a>

    <a href="#" data-hover="Propinquity">Propinquity</a>

    <a href="#" data-hover="Harbinger">Harbinger</a>

</nav>

还有一种情况是使用添加span等行内元素来实现效果

<nav class="cl-effect-10">

    <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>

    <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>

    <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>

    <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>

    <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>

</nav>