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等技术；在这里你能获得的不止是技术上的提高，还有一些学习经验以及志同道合的朋友，赶快加入咱们，一块儿学习，一块儿进化吧！！！