6.1 超链接特效


一、动态超链链

二、按钮式超链接

三、CSS控制鼠标指针

四、浮雕背景超链接

五、超链接下划线动画

在掌握了CSS布局的基本方法和原理之后，接下来的几章将针对页面中非常重要的部分“链接与导航”进行专门的介绍。本章对链接本身以及通常用于网页导航的HTML结构进行介绍。在后面的章节中再分专题分别讲解。

超链接是网页上最普通不过的元素，通过超链接能够实现页面的跳转、功能的激活等，因此超链接也是与用户打交道最多的元素之一。本节主要介绍超链接的各种效果，包括超链接的各种状态、伪类和按钮特效等。

一、动态超链接

在HTML语言中，超链接是通过标记<a>来实现的，链接的具体地址则是利用<a>标记的href属性，代码如下所示：

  1. <a href="http://www.lodidance.com">链接文本</a>

在默认的浏览器测览方式下，超链接统一为蓝色并且有下划线，被点击过的超链接则为紫色并且也有下划线。

这种最基本的超链接样式现在已经无法满足广大设计师的需求。通过css可以设置超链接的各种属性，而且通过伪类别还可以制作很多动态效果。首先用最简单的方法去掉超链接的下划线，代码如下所示：

  1. text-decoration:none;

此时无论是超链接本身。还是点击过的超链接，下划线都被去掉了，除了颜色以外，与普通的文字没有多大区别。

仅仅通过设置标记<a>的样式来改变超链接，并没有太多动态的效果，下面来介绍利用CSS的伪类别(Anchor Pseudo Classes)来制作动态效果的方法，具体属性设置如下表所示。lodidance.com

属性 说 明
a:link 超链接的普通样式，即正常浏览状态的样式
a:visited 被点击过的超链接的样式
a:hover 鼠标指针经过超链接上时的样式
a:active 在超链接上单击时，即“当前激活”时，超链接的样式

注意：CSS就是通过以上4个伪类别，再配合各种属性风格制作出千变万化的动态超链接的。这里必须指出几点要特别注意的问题。

(1) 对于这4个伪类别，要注意它们的声明顺序。例如，为了使平常状态越级链接取消下划线，而在鼠标指针经过时出现下划线，可以如下设置：

  1. a:link, a:visited{ text-decoration:none; }
  2. a:hover a:active{ text-decoration:underline; }

但是如果交换上面两行代码的顺序，对鼠标指针经过时的设置将不会产生效果。这是由于前面讲过的“层叠”的原因，上面的这些CCSS规则其有两样的特殊性，因此后面的规则将覆盖前面的规则，要按照上面的顺序来进行设置。

(2) a:link与a设置的都是链接在没有鼠标指针经过时的效果，那么它们是否完全等效呢？通常情况下二者是没有区别的，但是严格来说，在个别情况下两者有所区别，在一个a标记没有设置跳转地址（即href属性）时，如果设置a:link则无效．而设置a则仍然有效。在实际工作中，经常使用：

  1. a, a:visited{ text-decoration:none; }

而不用：

  1. a:link, a:visited{ text-decoration:none; }

(3) 当前激活状态“a:active”一般被显示的情况非常少，因此很少使用。因为当浏览者单击一个超链接后，焦点很容易就会从这个链接上转移判其他地方，例如新打开的窗口等，此时该超链接就不再是“当前激活”状态了。因此，通常无需设置a:active的样式。

返回顶部

二、按钮式超链接

除了简单的文字颜色、下划线之外，对链接还可以设置各种属性，产生丰富多彩的效果。例如很多网页上的超链接都制作成各种按钮的效果，这些效果大都采用了各种图片。本节仅通过CSS的普通属性来模拟按钮的效果，如图1所示。


图1 按钮式超链接

本案例文件位于网页学习网CSS教程资源中“第6章\01\button-style.htm”。

① 首先建立最简单的菜单结构，本例直接采用<a>标记排列的形式，代码如下所示：lodidance.com

  1. <body>
  2. <a href="#"> Home </a>
  3. <a href="#"> Contact Us</a>
  4. <a href="#"> Web Dev</a>
  5. <a href="#"> Web Design</a>
  6. <a href="#"> Map </a>
  7. </body>

此时页面的效果仅是几个普通的超链接堆砌。

② 然后对<a>标记进行整体控制，同时加入CSS的3个伪属性。对于普通超链接和点击过的超链接采用相同的样式，并且利用边框的样式模拟按钮效果。而对于鼠标指针经过时的超链接，相应地改变文字颜色、背景色、位置和边框，从而模拟出按钮“按下去”的特效，样式代码如下：

  1. <style>
  2. a{                                      /* 统一设置所有样式 */
  3. font-family: Arial;
  4. font-size: .8em;
  5. text-align:center;
  6. margin:3px;
  7. }
  8. a:link, a:visited{                      /* 超链接正常状态、被访问过的样式 */
  9. color: #A62020;
  10. padding:4px 10px 4px 10px;
  11. background-color: #ecd8db;
  12. text-decoration: none;
  13. border-top: 1px solid #EEEEEE;      /* 边框实现阴影效果 */
  14. border-left: 1px solid #EEEEEE;
  15. border-bottom: 1px solid #717171;
  16. border-right: 1px solid #717171;
  17. }
  18. a:hover{                                /* 鼠标经过时的超链接 */
  19. color:#821818;                      /* 改变文字颜色 */
  20. padding:5px 8px 3px 12px;           /* 改变文字位置 */
  21. background-color:#e2c4c9;           /* 改变背景色 */
  22. border-top: 1px solid #717171;      /* 边框变换，实现“按下去”的效果 */
  23. border-left: 1px solid #717171;
  24. border-bottom: 1px solid #EEEEEE;
  25. border-right: 1px solid #EEEEEE;
  26. }
  27. </style>

上面的样式代码中首先设置了<a>标记的整体样式，即超链接所有状态下通用的样式，然后通过对3个伪属性的颜色、背景色和边框的修改．模拟了按钮的特效。最终显示效果如图1所示。

返回顶部

三、CSS控制鼠标指针

在浏览网页时，通常看到的鼠标指针的形状有箭头．手形和I字形，而在Windows环境下实际看到的鼠标指针种类要比这个多得多。CSS弥补了HTML语言在这方面的不足，通过cursor属性可以设置各式各样的鼠标指针样式。

cursor属性可以在任何标记里使用，从而可以改变各种页面元素的鼠标指针效果，代码如下所示：

  1. cursor:pointer;

pointer是一个很特殊的鼠标指针值，它表示将鼠标设置为被激活的状态，即鼠标指针经过超链接时。该浏览器默认的鼠标指针样式在Windows中通常显示为手的形状。如果在一个网页中添加了以上语句，页面中任何位置的鼠标指针都将呈现手的形状。除了pointer之外，cursor还有很多定制好了的鼠标指针效果，如下表所示。

属性 说 明 属性 说 明
URL 根据用户定义的资源显示 auto 正常鼠标
crosshair 十字鼠标 default 默认鼠标
ponter 点状鼠标 move 移动鼠标
text 文字鼠标 wait 等待鼠标
help 求助鼠标 progress 过程鼠标

经验：表中的鼠标指针样式，在不同的机器或者操作系统显示时可能存在差异，读者可以根据需要适当选用。很多时候，浏览器调用的是操作系统的鼠标指针效果，因此同一用户浏览器之间的差别很小，但不同操作系统的用户之间还是存在差异的。

返回顶部

四、浮雕背景超链接

除了背景颜色和边框等传统css样式外，如果将背景图片也加入到超链接的伪属性中，就可以制作出更多绚丽的效果。本例通过超链接背景图片的变换，实现浮雕的效果，如图2所示。注意本例需要用IE浏览器调试，不要使用Firefox浏览器，因为这里用到了Firefox不支持的属性。

图2 浮雕式超链接

① 首先用<table>标记搭建整个HTML框架，加入Banner图片、页面背景颜色和超链接的排列等，并且为两个表格添加CSS类别，以便设置样式，代码如下所示。

  1. <table cellpadding="0" cellspacing="0" class="links">
  2. <tr><td>
  3. <a href="#">Home</a><a href="#">Contact</a><a href="#">Web</a>
  4. <a href="#">Design</a><a href="#">Map</a>
  5. </td></tr>
  6. </table>

注意：在输入上面的代码时，相邻的“<a>”和“</a>”之间不要有空格，也不要换行，具体原因后面会讲解。

② 制作浮雕的背景（宽度可以是1px）．作为超链接所在行的背景（本教程资源中提供）。设置为水平方向重复，代码如下所示。

  1. table{
  2. font-family:Arial;
  3. font-size:12px;
  4. width:100%;
  5. background:url(button1_bg.jpg) repeat-x;
  6. }

③ 再制作一个宽度固定的按钮图片（这里为80px，button1.jpg），与浮雕背景完全一样，但是最左边有一道白色的竖线，作为按钮的背景图片。并添加到统一设置的<a>属性样式中，代码如下所示。

  1. a{
  2. width:80px; height:32px;
  3. padding-top:10px;
  4. text-decoration:none;
  5. text-align:center;
  6. background:url(button1.jpg) no-repeat;  /* 变换背景图片 */
  7. }

以上代码设置了超链接的高度和宽度等统一参数。此时页面的超链接部分可以看到作为按钮背景图片的button1.jpg，其左边的白竖线实现了按钮分割的效果。

④ 再用同样的方法制作一个宽度跟button1.jpg-样，但是背景为深色浮雕的图片button2.jpg．图片最左边同样有竖直的白线，将其作为鼠标指针经过超链接时的背景。然后给超链接添加CSS伪类别，修改相应的文字颜色，代码如下所示。

  1. a{
  2. width:80px; height:32px;
  3. padding-top:10px;
  4. text-decoration:none;
  5. text-align:center;
  6. }
  7. a, a:visited{
  8. color:#654300;
  9. background:url(button1.jpg) no-repeat;  /* 变换背景图片 */
  10. }
  11. a:hover{
  12. color:#FFFFFF;
  13. background:url(button2.jpg) no-repeat;  /* 变换背景图片 */
  14. }

通过变换鼠标指针经过超链接时的背景图片。就实现了超链接浮雕的效果，如前面的图2所示。

读者还可以根据自己的需要，制作各式各样的背景图片，从而实现各种不同的效果。关于这两个背景的制作方法，请参考网页学习网Fireworks或者Photoshop的相关教程，很简单的。

注意：这里还需要补充说明两点注意事项。

(1) 在本例中，各个链接之间是直接相邻的，在书写HTML的时候前一个</a>和它后面的<a>之间不要有空格，也不要在</a>和<a>之间换行，否则会出出现。在鼠标指针经过时，它的后面和下一项之问有一个空白。

(2) 在本例中所采用的方法在在Firefox中的显示效果并不理想，原因在于Firefox不支持直接设置<a>标记的高度和宽度。

如果希望能在所有的浏览器中都显示同样的浮雕效果，必须采用<ul>和<li>等项目列表的标记，这在下一节中将会详细介绍，本例的侧重点在于变换背景图片的设计思路。

返回顶部

五、超链接下划线动画

这里是一个有趣的特殊下划线效果，如图3所示，在这个链接文字的下面是一条会移动的虚线下划线。普通状态时，虚线向左移动，鼠标指针经过时，虚线向右移动。

本案例文件位于网页教学网CSS教程资源“第6章\03\ani-undcrline.htm”。


图3 动画下划线效果

这个案例中“会动”的下划线实际上并不是真的下划线，而是用背景图像来实现的。

①首先准备两个动画GIF格式的图像，都是高2像素，宽4像素。第1个图像文件中有4帧。

当这些帧在动画GIF文件中循环显示的时候，就会出现跑马灯的移动效果，这个原理类似于平常在理发馆门口看到的转动圆筒。这个图像文件的制作方法这里就不介绍了，读者有兴趣可以参考网页学习网Fireworks或者Pbotoshop的相关教程，在本教程资源中有这个个文件，读者可以直接使用。

② 第2个图像文件与第1个文件的内容相同，只是4帧的顺序不同，目的是为了实现相反的移动效果。lodidance.com

③ 接下来，页面的代码如下。

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>下划线特效</title>
  5. <style type="text/css">
  6. a,a:visited{
  7. background: url(bg2.gif) repeat-x left bottom;
  8. text-decoration:none;
  9. }
  10. a:hover{
  11. background: url(bg.gif) repeat-x left bottom;
  12. text-decoration:none;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <a href="#">下划线特效</a> <a href="#">下划线特效</a>
  18. </body>
  19. </html>

可以从这段非常简单的代码中看出，实现这个效果的关键就是对链接的不同伪类设置不同移动方向的背景图片。

返回顶部

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/684.html

6.1 超链接特效,布布扣,bubuko.com

时间： 2024-02-20 17:02:42

6.1 超链接特效的相关文章

html5+CSS3实现的炫酷超链接特效

今天为大家介绍一个非常炫酷的超链接特效.在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果. 这些超链接特性,大都是借助伪元素.svg.HTML5动画来实现的.效果都很漂亮,不信看下面. 用你的鼠标悬停在这些链接上,你就能体验和传统链接完全不一样的感觉. 当然最重要的一点:你需要使用现代浏览器才能有更好的体验效果,比如谷歌浏览器或火狐浏览器. 演示效果和下载请看:http://yusi123.com/3236.html1. [代码]节选其中的第一段DEMO效果css,大家可以看看.    

CSS3 ::before和::after伪元素的实际应用

实例 1.清除浮动 通常我们清除清除浮动的方式就是在浮动元素后面添加一个空的Div标签,然后在设置它的清除浮动要是,使用after伪元素,我们就不需要添加无意义的div标签在html中了,下面的例子就使用了伪元素清除浮动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> ul { margin: 200p

你会用::before、::after吗

::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可

关于css中after和before伪类的用法

::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可

精通CSS+DIV网页样式与布局--页面和浏览器元素

在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动条.首先我们来看一张思维导图: 接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:  动态超链接 <span style="font-size:18px;"><span style="

创意网站大集合

趣味游戏:请画一个小人 请随意画出一个小人,它就能活起来,你可以和它一起完成一次充满奇幻色彩的冒险旅程. HTML5旋转拼图智力游戏 这是一个HTML5 jQuery 益智游戏,玩家需要调换图形的位置来实现目标图案. 动画展示计算机迷宫路径各种搜索算法 十分形象的迷宫搜索算法,能看的计算机如何一步一步的探索路径,障碍物,最终确定最佳,最近的路线图 中文版濒危动物CSS碎片拼图 这里我们用纯CSS技术表现出30种动物的碎片拼图形象,这30动物,非常的可爱,但不幸的是,它们都是濒临灭绝的动物,它们的

::before和::after伪元素的用法

一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入. 所以不要用:

CSS基础学习记录——伪类和伪元素

定义 伪类选择器:伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息.(CSS3中的定义) 不存在与DOM树中的信息,如<a>标签的 :link.:visited.:hover.:focus.:active.这些信息不存在与DOM树结构中,只能通过CSS选择器来获取: 不能被常规CSS选择器获取到的信息,如:first-child,选择元素的第一个子元素,这个功能无法用常规选择器实现,但是可以用js实现,不过和:first-child相比实在是

转::before和::after伪元素的用法

一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:target,:not(),:focus. 常见伪元素--::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入. 所以不要用: