你的分享就是我们的动力 ---﹥

用CSS3制作鼠标悬浮渐变着色效果

时间:2013-02-28 16:30来源:www.chengxuyuans.com 点击:

CSS3虽然还没有被广大浏览器所兼容,甚至A级浏览器也只是通过私有属性给予有限的支持。但是在渐进增强的理念下,有选择性地使用CSS3可以得到不错的效果,前提是保证在不支持CSS3的浏览下也可以获得最基本的样式。

本文会使用CSS3 Transition来制作特效,不使用任何的Javascript,最终效果大致如下:

一张黑白的图片,当鼠标悬浮在图片上时,慢慢变成彩色;鼠标移出时,逐渐恢复黑白。

东西简单,学习和记录是主要目的。这个功能可以用作一切使用背景图片的功能,诸如按钮、链接等都可以起到比较好的效果。

准备材料

为了完成着色的功能,首先需要一张黑白的图片,和一张彩色的图片,并且保证这两张图片可以完全重叠,这个很容易做:

  1. 得到一张彩色的图片,使用Photoshop打开。
  2. 选择菜单中的Image – Adjustment – Desaturate,也可以通过快捷键SHIFT+CTRL+U完成。
  3. 将图片另存即可。

本文中使用2张图片,文件名分别为hikaru-large.jpghikaru-large-wb.jpg

基本DOM结构

为了突出HTML的语义性,就假设是一个图片库的索引页,使用一张具有典型代表意义的图片作为专辑的入口,结构非常简单,就一个链接:

<a id="hikaru" href="gallery/hikaru"><span>蓝泽光</span></a>

因此就算浏览器禁用了CSS,依旧可以看到最基本的结构,这也是前端的最基本要求。

添加图片

下一步需要做的是将彩色与黑白的图片作为背景图片设置在元素之上:

#hikaru {
    display: block;
    width: 400px;
    height: 240px;
    background: url(hikaru-large-wb.jpg) no-repeat;
}
#hikaru span {
    display: block;
    width: 460px;
    height: 200px;
    padding: 20px;
    background: url(hikaru-large.jpg) no-repeat;
}

为了让文字更美观一点,给<span>加了padding,同时计算W3C的盒模型,在width/height属性上将padding的位置空出。

图片切换

以上的CSS能展现背景图片,但是<span>元素的背景图片会将<a>元素覆盖,看到的始终是hikaru-large.jpg即彩色的图片。

而期待的效果是在鼠标不悬浮的时候显示黑白图片,悬浮时显示彩色图片,因此要对CSS稍加修改。

在这里,第一个反应是对<span>添加display: none;属性,但是只有显示/隐藏两种状态的display属性显然不能满足最后“渐变”的要求,因此这种方案只能取消。幸好CSS提供了透明度的支持,可以达到效果:

#hikaru span {
    opacity: 0;
    filter: Alpha(Opacity=0);
}
#hikaru:hover span {
    opacity: 1;
    filter: Alpha(Opacity=1);
}

到此已经得到了最基本的鼠标悬浮效果。

动画渐变

最后的渐变效果,只是在以上CSS的基础上加上动画,CSS Transition可以实现最基本的基于数值的动画效果,并且占用CPU较低。

CSS Transition在各浏览器中的支持是通过私有属性的方式实现的,各浏览器有着不同的前缀:

  • Chrome:-webkit-transition: property duration timing delay
  • Firefox:-moz-transition: property duration timing delay
  • Opera:-o-transition: property duration timing delay
  • W3C:transition: property duration timing delay

因此设置一个CSS Transition可不简单,一下子要4个属性,好在4个属性的值的组成还是一样的,就复制粘贴一下吧:

#hikaru span {
    -webkit-transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
    transition: opacity .4s ease-in;
}

这样一个基本的效果就完成了,对于不识别transition的浏览器来说,至少保证有鼠标悬浮后变成彩色图片的效果,也算达到了基本的渐进增强的理念。

最终效果如下

需要注意的是,这个效果在IE中要谨慎使用PNG图片,IE8在背景为某些特定的PNG图片时,同时使用filter会出现“描边”的现象,大致效果如下图所示:

png+filter在IE下的描边现象

如果有朋友对这个现象有所了解,还请多多指教,谢谢。

转载注明地址:http://www.chengxuyuans.com/css/49520.html