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>