为什么css里面的glow滤镜，有时有效，有时无效？

html-css017

为什么css里面的glow滤镜，有时有效，有时无效？,第1张

建议你不要经常使用滤镜。

一是CSS滤镜目前仅IE支持，并且有时在支持上会出现无法解释的BUG。

二是CSS滤镜如果用的太多了，会给访客的电脑造成负担。因为它的是客户端完成的，CSS滤镜效果太多太炫的话很会吃电脑内存，并且会让网页拖动起来不流畅。

1， css3圆形光环闪烁效果。

2，文件引用：,

<style type="text/css">

body{background: #EF7148}

img{cursor:pointer-webkit-animation: scaleout 1.3s infinite ease-in-outanimation: scaleout 1.3s infinite ease-in-out}

@-webkit-keyframes scaleout {

0% { -webkit-transform: scale(1.0) }

100% {

-webkit-transform: scale(1.1)

opacity: 0

}

}

@keyframes scaleout {

0% {

transform: scale(1.0)

-webkit-transform: scale(1.0)

} 100% {

transform: scale(1.1)

-webkit-transform: scale(1.1)

opacity: 0

}

}

</style>

1、首先新建一个简单的html文件，如图所示。

2、然后根据自己的需要，简单的设置一下层宽高和图片样式。

3、新建一个用于局部模糊的层，利用绝对定位和z-index使它浮动在图片上面，效果如果所示。

4、然后细调css的样式使它达到自己想要的效果，比如想让中间的S模糊。

5、最后预览下如下图所示，就完成了。