您现在的位置是:首页 > 学无止境 > CSS3|Html5

css3创建导航链接效果

杨青2013-08-22人围观
简介分享一些常用和创意的导航链接效果。例子中鼠标悬停使用伪元素和动画来创建一个微妙和有现代节奏感的链接效果。注意,伪元素并不是在所有的浏览器都能兼容。使用Chrome和Firefox浏览器观看,效果最佳。

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

注意,伪元素并不是在所有的浏览器都能兼容。使用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>

打赏本站,你说多少就多少

文章评论

本栏推荐

点击排行

官方微信