html5咻一咻动画效果,CSS3模糊层效果

大年30晚上大家是不是被两马的QQ刷一刷,微信摇一摇,支付宝咻一咻给戏弄了呢？是不是没有好好看春晚呢？(反正我都不看的...)?整个大年30夜晚到处都是刷一刷,摇一摇,咻一咻的声音,我连bilibili拜年祭都没怎么好好的看。

最近都快忘了我的网站了.

今天终于有时间了,就来分享一下CSS3模糊效果,知道的朋友请低调~不知道的请努力学习，全程代码简短。

效果如上图，整个效果其实是两张图片，第一张作为背景图片，第二章作为模糊图片

HTML：

【七空幻音】CSS3模糊效果

CSS3:

div{

background:url("image.jpg") no-repeat;

width:200px;

height:180px;

margin:50px auto 0;

position:relative;

}

.content{

position: absolute;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: 30px;

overflow: hidden;

}

.blur{

position: absolute;

width: 100%; bottom: 0; left: 0;

-webkit-transform: translateZ(0);

transform: translateZ(0);

/*主要代码*/

filter: url(blur-5px.svg#blur);

-webkit-filter: blur(5px);

-moz-filter: blur(5px);

filter: blur(5px); /* FireFox*/

/* IE6~IE9 */

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);

}

.meta{

position: absolute;

left: 0;

bottom: 0;

width: 100%;

color:#fff;

background-color: rgba(0,0,0,.2);

font-size:12px;

line-height:30px;

}

注意:

效果代码如上,完美支持FF与chrome浏览器,对于IE与edge浏览器貌似并没有什么卵用还有360浏览器7.0版本貌似会意外出现很多横条

下载地址：