文档章节

css3创建导航链接效果

kongxiangjia
 kongxiangjia
发布于 2015/01/27 14:02
字数 296
阅读 10
收藏 0

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>

© 著作权归作者所有

kongxiangjia
粉丝 0
博文 6
码字总数 5723
作品 0
虹口
私信 提问
绚丽而又实用的jQuery和CSS3导航菜单

我们说导航菜单是网站的一扇门,然而精美便捷的导航更是能让用户方便地游走在网站的各个角落,更重要的是,能让用户牢牢地记住这扇大门,记住这个网 站。所以很多网站设计师对网站导航的设计...

tp_wire
2012/06/29
4.1K
3
分享简单而实用的网页菜单导航【提供源码】

菜单导航对于一个网站来说非常重要,对于浏览者来说,导航设计的好坏将直接影响用户的体验。这里,我们为网页开发者提供了一系列简单但是实用的导航菜单例子及其源码,仅供参考和学习。 CSS3...

tp_wire
2012/06/14
402
1
最佳的 HTML5 和 CSS3 教程 - June 2011

Apple.com 导航菜单(只使用CSS3) 该教程将为你展示如何使用 CSS3 创建苹果风格的菜单。 使用 CSS3 的 RGBa 属性处理透明效果 一个简短的教程介绍 CSS3 的透明效果处理 Getting started with...

红薯
2011/06/17
6.8K
15
20 个很酷的使用 CSS3 制作的导航菜单教程

最近关于 HTML5 和 CSS3 的内容挺多的,说明这项技术日趋成熟,本文介绍 20 个效果很酷的导航菜单。 使用 CSS3 创建 Tabbed 导航条 如何使用 CSS3 创建环形菜单 使用纯 HTML/CSS3 创建 Ribb...

红薯
2011/07/06
3.6K
6
8 款个性化的 jQuery 和 CSS3 菜单

下面要给大家分享8款非常个性化的jQuery和CSS3菜单,这些菜单由于外观比较独特,所以也许不是非常通用,但是我们可以认可的是这些菜单的设计思路非常棒,值得借鉴。下面一起来看看这些菜单吧...

android哥哥
2012/08/22
2.8K
4

没有更多内容

加载失败,请刷新页面

加载更多

阿里P7架构师:这些技术点没搞懂,我劝你不要跳槽!

阿里P7架构师架构师:这些技术点没搞懂,我劝你不要跳槽! 哪些技术点呢? 废话不多说,技术点全在下面这6张图里面了! 1.怎么看源码? 2.分布式 3.微服务 4.性能优化 5.工程化 粉丝福利:一...

别打我会飞
10分钟前
1
0
易错题

architect刘源源
15分钟前
0
0
使用Json4s 将带有Timestamp的对象转json时 变为所在时区

在有Timestamp属性的对象转json时 最后出来的时间会减小8小时,是因为变成了0时区,需要将隐式转换中添加设置本地时区 import org.json4s.{DefaultFormats, Formats}import org.json4s.jac...

可达鸭Go
16分钟前
0
0
工作六年java程序员的工作感悟,带你走出迷茫

前言 很多年前,刚刚从大学毕业的时候,很多公司来校招。其中最烂俗的一个面试问题是:“你希望你之后三到五年的发展是什么?”。我当时的标准回答是(原话):“成为在某一方面能够独当一面...

java知识分子
21分钟前
0
0
jenkins邮箱发送失败以及解决方案

jenkins邮箱设置报错以及解决方案 Jenkins邮箱设置 我用了 Email Extended Plugin这个插件,这个插件会有更加丰富的邮件内容,建议添加。 1.安装 Email Extended Plugin 2.系统管理-系统设置...

shzwork
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部