如何用css3实现当我鼠标滑过导航时图片会缓慢的显现出来?

html-css022

如何用css3实现当我鼠标滑过导航时图片会缓慢的显现出来?,第1张

html部分:

<img src="http://www.baidu.com/img/bdlogo.png" />

css部分:

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

}

这是只有css3 可能一些浏览器不支持所以楼主要注意

我一般喜欢用jquery毕竟方便嘛

希望能帮到你

刚刚又看了一遍楼主的代码貌似你要的可能是css3 animation这样的?

这里是官网

http://www.w3schools.com/css/css3_animations.asp

这里是transitions的documentation

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

1、因为背景图片都是写在CSS中,但是不能确保服务器上一定有这张图片,所以就必须在当前背景图片缺省的情况下启用默认背景。

2、背景图片图层的背景都是透明的,所以之前采用多背景来做的时候发现上面的图片无法完全覆盖遮罩下面的图片!

3、应该说是可以的。

先将你需要组合的图片编号,如M1-M10。就按你的需要连接的动画从头到尾进行编号放到一个文件夹下,在软件中“导入到舞台”选中其中一张图片进行导入,软件会自动根据你文件编号判断该文件夹中的文件可能是序列文件并提示你是否将其全部导入,你选择“是”软件即将全部图片按顺序建立每张图片的关键帧并自动形成动画。