CSS悬停背景图像之间的淡入淡出

发布时间:2019-05-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了CSS悬停背景图像之间的淡入淡出脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法可以做到以下几点?

我有一个透明的png精灵,在左边显示一个标准图片,在右边显示:悬停状态的图片.

有没有办法可以让图像从左图像淡入到右图像中:仅使用css3过渡悬停?我尝试了以下,但它不起作用:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

现在,上面确实为背景设置了动画,它将图像平移过来.我想要的不是平底锅是淡化或溶解效果.

更新:我最终必须创建两个元素,并分别为不透明度设置动画.这有点乱,因为我必须指定每个元素的确切边距,但我想它会起作用.谢谢大家的帮助:)

解决方法

关于这个主题的最新消息:

Chrome 19及更高版本支持背景图像转换:

演示:
http://dabblet.com/gist/1991345

附加信息:
http://oli.jp/2010/css-animatable-properties/

总结

以上是脚本之家为你收集整理的CSS悬停背景图像之间的淡入淡出全部内容,希望文章能够帮你解决CSS悬停背景图像之间的淡入淡出所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: