使用CSS3淡出图像悬停淡出?

时间:2012-07-07 14:15:52

标签: css css3 jsfiddle

我想知道是否有可能在图像上声明一个unhover类?

我想要实现的是当有人在图像上盘旋它会淡入然后当它们被移开时它会逐渐退去吗?

继承我的代码,当有人在图像上盘旋时,我得到了淡入效果,但是当他们徘徊时我也需要淡出...希望这是有道理的。

http://jsfiddle.net/L7XCD/

2 个答案:

答案 0 :(得分:32)

这对你有用! http://jsfiddle.net/L7XCD/1/

让我们使用伟大的mozilla文档来解释这个:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

我们还使用了过渡时序功能(简易,线性,易于操作,易于输出,易于输入)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

CCS 标记:

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

由于他使用过渡轻松进入,我认为最好使用相同的过渡功能。

有关详细信息,请查看documentation here

希望它有所帮助!

答案 1 :(得分:4)

http://jsfiddle.net/L7XCD/2/ 只需在没有hover-tag

的情况下将过渡效果添加到元素中
相关问题