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

html-css021

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

img:hover{}设置宽高属性，比默认情况大就行。注意与周围元素的协调，避免放大后布局错乱。

不过这类行为范畴的东西最好交由JS来完成。

还有就是IE6对元素伪类支持不好，hover有bug。测试的时候要注意。