用css做一个呼吸效果，然后让想闪烁的元素调用：
比如，我的div想呼吸
div.breatheDiv{height:500px
width:500px
background-color: #FF94A6
border-radius: 100%
webkit-animation: breathe 2000ms ease infinite
-moz-animation: breathe 2000ms ease infinite
-o-animation: breathe 2000ms ease infinite
animation: breathe 2000ms ease infinite
}
@-webkit-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-moz-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-o-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
这个css是无法实现局部模糊的，所以做不到，但是有一点可以做到就透明.xx{background:rgba(255,255,255,0.4)}这样就是一个背景色为白色 透明度为50%的效果了但是IE9一下不支持这种写法，模糊也是:
.blur {
filter: url(blur.svg#blur)/* FireFox, Chrome, Opera */
-webkit-filter: blur(10px)/* Chrome, Opera */
-moz-filter: blur(10px)
-ms-filter: blur(10px)
filter: blur(10px)
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)/* IE6~IE9 */
}
那个效果一个是窗口区域背景模糊，一个是窗口区域窗口半透明。 背景模糊可以做，但是背景局部模糊办不到
两种方法:第一,一张图片, 制作一个变亮的跟一个变暗的在一张图,然后用定位background-position:定位置
第二,两张图片, 制作两张图片, 一开始显示变暗的图片.当鼠标已过,:hover 就换另一张图片
