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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,104評論 1 92
  • 大部分的后端會很很鄙視前端。我也不知道為什么,可能大部分人都會覺得腳本語言根本不算語言。 大多人 會叫我們切圖仔,...
    小黑的眼閱讀 3,596評論 0 15
  • 事件:我經(jīng)常糾結(jié),一件事情沒有辦法決定,就拿今天練車來說。 分析:我為什么會糾結(jié)呢?我糾結(jié)的時候感受是什么呢?糾結(jié)...
    依米Sunshine閱讀 269評論 0 0
  • ColorPicker 一款仿Photoshop取色器的Android版取色器。 github地址:https:/...
    李景三閱讀 2,407評論 0 3

友情鏈接更多精彩內(nèi)容