在许多站点上,比如http://www.clearleft.com,您会注意到当链接悬停在上面时,它们将淡入不同的 colored颜色 ,而不是立即切换(默认操作).
我假设JavaScript是用来创建这种效果的,有谁知道是怎么做的吗?
在许多站点上,比如http://www.clearleft.com,您会注意到当链接悬停在上面时,它们将淡入不同的 colored颜色 ,而不是立即切换(默认操作).
我假设JavaScript是用来创建这种效果的,有谁知道是怎么做的吗?
现在人们只是使用CSS3 transitions,因为它比messing with JS容易得多,浏览器支持相当不错,而且只是表面上的,所以即使它不起作用也无关紧要.
类似这样的操作可以完成工作:
a {
color:blue;
/* First we need to help some browsers along for this to work.
Just because a vendor prefix is there, doesn't mean it will
work in a browser made by that vendor either, it's just for
future-proofing purposes I guess. */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s;
}
a:hover { color:red; }
您还可以通过用逗号分隔每个声明来转换具有不同计时和轻松函数的特定CSS属性,如下所示:
a {
color:blue; background:white;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }