css过滤动画图片变大后闪不停

html-css017

css过滤动画图片变大后闪不停,第1张

css过滤动画图片变大后闪不停,将三个图片整合为一张图片可以改善。这样可以同时将三张图片一起加载,就不会出现闪烁的问题了,然后再通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术。

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

@keyframes blink{

0%{opacity: 1}

100%{opacity: 0}

}

@-webkit-keyframes blink {

0% { opacity: 1}

100% { opacity: 0}

}

.blink{

color: #dd4814

animation: blink 1s linear infinite

-webkit-animation: blink 1s linear infinite

}

3、浏览器运行index.html页面,此时文字实现了闪烁的效果。

#header-login{ /*顶部登陆条*/

width:1000px

height:18px

background:url(image/header-login-bg.gif) repeat-x top left}

看上边的代码,主要有两点,1.最好把那张背景图直接放在同一目录的images下,这样子必免浏览器走弯路找你的图片路径,2.top和left.在写的时候最好还是加上。最后你有一句是重复删掉

忘了说一句不知道你的背景图片多大,越小越好!

这个问题就不是CSS的问题了,我觉的是你的页面加载的东西太多了,而且肯定有由先择行的,导致页面,先执行了由先执行的。这种问题只能用排除,从最有可能的地方一点点的试。不过你可以,先把所有的东西移除,只保留你想要的,看看什么结果