CSS3模糊滤镜效果

html部分：

<div class="lj" style="width: 200px;height: 200px;position: absolute;z-index: 5;"><p>hellsidjfasjflsjflajs ljasdfjajfa</p></div>

css部分：

.filter{
    -webkit-animation:filter 3s linear;
    -o-animation:filter 3s linear;
    animation:filter 3s linear;
}
@-webkit-keyframes filter {
    0%{-webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
}
    100%{-webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
}
}
@keyframes filter {
    0%{-webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
}    
100%{-webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
}
}

js部分：

$(document).ready(function(){    $('.lj').addClass('filter');});

模糊效果.gif