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

html-css06

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页面，此时文字实现了闪烁的效果。

hover闪烁是Ie6的bug。复制代码代码如下放到</head>前面: 

<!–[if IE 6]> 

<script type="text/javascript"> 

document.execCommand("BackgroundImageCache", false, true) 

</script> 

<![endif]–>