Vue 实现图片高斯模糊切换效果

作者 : 开心源码 本文共507个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共267人阅读

序言

最近在网上冲浪的时候总是喜欢去看少量效果,看看自己可不可以做,看到一个高斯模糊的效果,如下图所示,感觉挺简单的,所以就实现了一波:

image

我们来看一下具体的实现方法,

  • 每张图上都有一个蒙版和文字,我们可以借助 opacity 来实现
  • 而后把这个蒙版盖在图片上
  • 而后使用 css3 中的 blur 属性来给图片设置模糊样式
.functionSubNav-image-opacity img {  -webkit-filter: blur(3px);  filter: blur(3px);}

Github地址

小白请先看这里

1、初识前台
2、初识JavaScript
3、Android开发人员不得不学习的JavaScript基础(一)
4、Android开发人员不得不学习的JavaScript基础(二)
5、Android开发人员不得不学习的Vue.js基础

公众号

欢迎关注我的个人公众号【IT先森养成记】,专注大前台技术分享,包含Android,Java,Kotlin,Flutter,HTML,CSS,JS等技术;在这里你能得到的不止是技术上的提升,还有少量学习经验以及志同道合的朋友,赶快加入我们,一起学习,一起进化吧!!!

公众号:IT先森养成记

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Vue 实现图片高斯模糊切换效果

发表回复