今天在做一个logo的效果遇到了问题。要实现打开网页logo呼吸状缓慢发光后熄灭,鼠标hover状态呼吸状缓慢发光常亮这样一个效果。
当然先用gif做两个简单的5帧左右的动画,起初想使用css sprite技术同时加载两个整个到一张图片上的gif动画,可是经过测试失败了,因为当鼠标悬停在logo上时,切换的第二章背景图已经在刚才打开页面时候随第一个图一起加载并开始动画了(这时其实是一张图),随后想到用两个GIf动画,鼠标悬停时,前换到另一个gif。
可是有经验的人都知道,鼠标hover状态时,已经向服务器发出下载第二章gif背景图片动画的请求,这是由于网络因素,应该有一个短暂的下载时间,这时会有白色间隙出现。这就需要对第二个gif背景图片预加载了
一个很简单的方法就是在前台页面文件里写入一个空的div层,在css中对他设置背景图片,给予相关属性:hight:0; weight:0;display:inline;这样就可以在第一次展示页面时下载所需的图片了。当再次向服务器发出请求时,这个图片已经在电脑缓存中,可以立即显示,很好的解决了切换背景图片时的空白间隔问题。