Vue 實現圖片高斯模糊切換效果

序言

最近在網上衝浪的時候老是喜歡去看一些效果，看看本身可不能夠作，看到一個高斯模糊的效果，以下圖所示，感受挺簡單的，因此就實現了一波：

咱們來看一下具體的實現方法，

• 每張圖上都有一個蒙版和文字，咱們能夠藉助 opacity 來實現
• 而後把這個蒙版蓋在圖片上
• 而後使用 css3 中的 blur 屬性來給圖片設置模糊樣式

.functionSubNav-image-opacity img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
複製代碼

上 Github地址

小白請先看這裏

一、初識前端

二、初識JavaScript

三、Android開發人員不得不學習的JavaScript基礎（一）

四、Android開發人員不得不學習的JavaScript基礎（二）

五、Android開發人員不得不學習的Vue.js基礎

公衆號

歡迎關注個人我的公衆號【IT先森養成記】，專一大前端技術分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技術；在這裏你能獲得的不止是技術上的提高，還有一些學習經驗以及志同道合的朋友，趕快加入咱們，一塊兒學習，一塊兒進化吧！！！