網生@誌 | zEUS.'Blog

首页 » 网页美化 » 2007-10-11 »

介绍一个 CSS 图片特效

Tag: ,
字体大小:T | T

不知道有没有人发现我换掉了 Feed 的统计图标,而使用了一个 RSS 的图片来链接到 本站 Feed 地址,然后我给这个图片做了一个 CSS 特效,你可以试着把鼠标移上去(位于“协议&订阅”模块的下方)… 是不是很棒?!

这个特效具体被称作什么,我也不太清楚,用我自己的描述就是:一个链接图案,鼠标滑上去后它就会切换成另一个图案。
之前我一直以为 CSS 通过 hover 这个动作来切换2张不同的图片,可试了半天没成功,最后 Jason 告诉我这并不是切换2张图片,而是给一张具有2种不图案的图片进行不同定位以取得不同的效果。怎么这句话这么难让人理解… 还是我表达有问题?
接下来简单介绍这个特效的实现方法:

首先准备一张具有两种大小一致图案的图片:

这个图片长118px,高59px,原理就是,我先让它显示下半部分的图案,当鼠标移动上去后,它就会显示上半部分的图案。下面给出实现特效的 CSS 代码:
/* RSS 图片效果 */
#rsslink a {
background: url(images/rss.png) no-repeat bottom left;
border: none;
width: 118px;
height: 30px;
display: block;
}
#rsslink a:hover {
background: url(images/rss.png) no-repeat top left;
height: 30px;
display: block;
}

代码中 rsslink 是这个特效的名称;a:hover 是鼠标移动的动作;background: url(images/rss.png) 是背景图片;display: block; 是显示背景图案;代码第一部分我通过 bottom left 的定位先显示背景图片的下半部分的图案,第二部分再通过 top left 的定位来显示背景图片上半部分图案。最后将这个 CSS 效果通过 span id 赋给 feed.zeuscn.net 这个链接:

然后就有了这种效果:

嘿嘿,是不是很简单,你学会了没呢? 😛
今后凡是学会了新的 CSS 特效我都会在这里“现学现卖”一番,来跟大家一起分享这些美化网页的方法!

zEUS.

« »

已经有91人发表了评论

  1. 这个好玩!我以后也添加一个这样的特效!

  2. @老帕:这是一张图片… 然后上面有2个图案,我用的移位,并不是替换。

  3. 图片层叠悬浮效果。可以这么称呼它吗?呵呵。
    另外,两张图片的名称都是rss.png?且在同一个文件夹下面?这有点悬吧?

  4. JasonIT on 2007年, 十月 12日 at 12:50 下午 said:

    你学的也很快 昨天我就看了你的代码发现做的很好

    多谢夸奖 😛

  5. 你学的也很快 昨天我就看了你的代码发现做的很好

  6. 不错,现在这种详细的教程是最吸引眼球de~

发表您的看法

TOP COMMENTS BOTTOM