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

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

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

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

HTML：

    <div class="div">
        <div class="content">
            <img src="image.jpg" class="blur"/>
            <span class="meta">【七空幻音】CSS3模糊效果</span>
        </div>
    </div>

CSS3:

<style>
        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;
        }
    </style>

注意:

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

下载地址：

【七空幻音】CSS3模糊效果