使用css3淡入/淡出

Question

可能重复:
缩略图淡出淡出

我很好奇是否有可能实现这种效果(只有淡入/淡出)

用css3.我有一个类似的缩略图滚动条,我想在没有javascript的情况下创建该效果,或者如果这是不可能的,你能帮助我用jquery创建这个简单的解决方案吗？谢谢!

Answer 1

是的,这可以通过CSS3过渡.

这是一个例子:http://jsfiddle.net/fgasU/

码:

<img src="photo.jpg"/>?

img{-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


img:hover{opacity:0}?

这个简单的例子将改变悬停时的不透明度.因为为"所有"属性定义了css转换,并且它们具有1秒的转换以及易于进行的缓动功能,所以属性更改是动画的.

此外,因为它是一个新属性,所以过渡属性必须在适用的浏览器实现之后.-webkit for chrome/safari,-moz for firefox/mozilla,-o opera,-ms microsoft.