怎样用CSS样式制作边缘光晕的模糊效果

html-css024

怎样用CSS样式制作边缘光晕的模糊效果,第1张

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

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

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

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

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

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>