您现在的位置是:首页 > 博客网站制作 > CSS3|Html5CSS3|Html5

css3创建导航链接效果

杨青2013-08-22【CSS3|Html5】人已围观

简介分享一些常用和创意的导航链接效果。例子中鼠标悬停使用伪元素和动画来创建一个微妙和有现代节奏感的链接效果。注意,伪元素并不是在所有的浏览器都能兼容。使用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>

Tags:导航   链接效果   css3

很赞哦! ()

文章评论

站点信息

  • 建站时间:2011年01月12日
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计625篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们