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

最新推荐文章于 2024-05-28 17:11:01 发布
最新推荐文章于 2024-05-28 17:11:01 发布
阅读量2.7k 收藏 2
点赞数
文章标签： javascript 前端 移动开发 ViewUI
原文链接：https://juejin.im/post/5c10dd1a6fb9a049ac7904b4
版权

序言

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

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

  • 每张图上都有一个蒙版和文字，我们可以借助 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等技术；在这里你能得到的不止是技术上的提升，还有一些学习经验以及志同道合的朋友，赶快加入我们，一起学习，一起进化吧！！！

weixin_33816946
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图像去噪极简教程（3）——高斯滤波
渔父歌的博客
04-15 4745
高斯滤波和均值滤波的原理一样，在均值滤波中所有的像素点的权重都一样，而在高斯滤波中则是越靠近中心的像素点权重远大，权重的分配由二维高斯公式生成的矩阵决定，矩阵的阶和扫描的窗口大小一致。 关于二维高斯公式这里不再赘述，不了解的可以看看这篇文章：高斯函数的详细分析，这里就只给出一个二维高斯分布的产生函数了： //生成高斯核 double* make_kernel(int size, double si...
vue项目使用cavans为图片实现复古、黑白、底片、浮雕、反向、模糊
qq_41227106的博客
07-27 1041
实现效果如下图 使用cavans进行对图片添加滤镜是根据图片每个像素点进行转变的，图主要是有三色素构成，红、绿、蓝，并结合清晰度来结合 当我们拿到一张照片的时候，画布可以使用drawImage方法把一张图绘制在画布上，然后使用getImageData方法幅度每个像素中的rgb值。 通过getImageData方法得出每个像素点的rgb值，他是已4 个位一个像素点，%4=1的是r值,%4=2是g值,%4=3是b值，%4=像素模糊值(0-255） 老照片 f...
前端canvas实现图片涂鸦(Vue2、Vue3都支持)
最新发布
weixin_54165147的博客
05-28 978
先看一下效果图吧代码组成：画笔大小、颜色、工具按钮都是组件，通俗易懂，可以按照自己的需求调整。
简单css实现高斯模糊（毛玻璃效果）
dream12331的博客
09-06 6683
img标签添加class  设置filter:blur (0-npx)模糊半径 filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */         -webkit-filter: blur(40px); /* Chrome, Opera */            -moz-filter: blur(40px);           ...
高斯模糊（兼容）
前端技术
07-15 1288
<!-- 图片 --> <image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563191496238&di=21d2f25a30afc5cf2d154654cb0f536d&imgtype=0&src=http%3A%2F%...
css实现高斯模糊样式
杨梦飞
04-16 3828
/** 格式，filer: blur(模糊半径) * 模糊半径，取值范围0~Npx，0为无效果 */ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: b...
基于Vue实现页面切换左右滑动效果
08-29
基于Vue实现页面切换左右滑动效果 通过基于Vue实现页面切换左右滑动效果，可以实现页面之间的滑动切换效果，提高用户体验。以下是相关知识点的详细介绍： 一、页面切换左右滑动效果的实现 要实现页面切换左右滑动...
Vue实现移动端页面切换效果【推荐】
10-17
Vue.js，作为一个流行的前端框架，提供了丰富的功能来实现这种效果。本篇文章将详细介绍如何利用Vue实现移动端页面切换，通过实例代码来展示具体操作。 首先，为了实现页面切换，我们需要使用Vue Router，它是Vue....
vue2.0实现导航菜单切换效果
12-12
本文实例为大家分享了vue2.0实现导航菜单切换的具体代码，供大家参考，具体内容如下 css *{ margin:0; padding: 0; } ul li{ list-style: none; } .navul{ margin:100px auto 20px; overflow: hidden; } ...
vue实现页面切换滑动效果
10-15
在Vue.js中实现页面切换滑动效果，可以借助Vue的内置组件`transition`以及`vue-router`来完成。`vue-router`用于处理页面间的路由跳转，而`transition`则负责过渡动画效果。以下将详细讲解如何实现这一功能。 首先...
CSS: filter: blur(); 实现高斯模糊效果，不可不知的细节优化
热门推荐
weixin_39015132的博客
07-24 9万+
原文链接 前言 在项目中，要实现如下的效果： 页面顶部的设计稿，前面一个卡片式的轮播，后边的背景（是椭圆的一部分）取前面的图片，进行一个高斯模糊的处理。 开始 前面的轮播部分，使用了第三方的轮播插件，非常好用，推荐给大家（地址）。轮播，不作为今天的主要内容，暂时简单描述下，有机会再详细讲解。有兴趣的同学可以自己试一试，根据插件提供的功能，进行一些样式调整即可。 现在开始分析后面背景...
基于HTML5 Canvas实现的图片马赛克模糊特效
01-18
插件描述：基于HTML5 Canvas实现的图片马赛克模糊特效.
高斯模糊原理（Gaussian Blur）
weixin_44403952的博客
05-19 1万+
高斯模糊实现原理 类似于均值滤波（用周围像素点的均值最为中心点的像素值），二维高斯函数滤波也是利用某点周围的数值进行高斯模型处理，再将处理的数值作为该点的像素值。 这里二维高斯模型为： 为了计算出周围高斯函数各个点的权重，设计一个9宫格： 以坐标值作为（x,y）的坐标值，计算每点的权重值如下（这里σ = 1.5），这样九个点的像素权值取如下： 为了计算加权平均，必须得使得9个点的和为1，即...
高斯模糊 GassianBlur
默默的潜行者
08-26 351
import cv2 as cv import numpy as np src=cv.imread("reba.png") cv.namedWindow("yuantu",cv.WINDOW_AUTOSIZE) cv.imshow("yuantu",src) #高斯模糊 dst=cv.GaussianBlur(src,(0,0),15) cv.imshow("GaussianBlue",ds...
高斯模糊实现小结
zddhub的专栏
04-11 5万+
注：博客中图表的大小难以调整，导致阅读不便，这里有其pdf版本：高斯模糊实现小结.pdf   高斯模糊是一种图像滤波器，它使用正态分布(高斯函数)计算模糊模板，并使用该模板与原图像做卷积运算，达到模糊图像的目的。 N维空间正态分布方程为： 其中，σ是正态分布的标准差，σ值越大，图像越模糊(平滑)。r为模糊半径，模糊半径是指模板元素到模板中心的距离。如二维模板大小为m*n，则模板上的元素
Android图片高斯模糊的一些方法
hj363049394的专栏
09-22 804
高斯模糊 高斯模糊就是将指定像素变换为其与周边像素加权平均后的值，权重就是高斯分布函数计算出来的值。 一种实现 点击打开链接 [java] view plaincopyprint? public static void gaussBlur(int[] data, int width, int height, int radius
如何判断图片中的图像是否模糊_你是否真的懂得，如何在 Photoshop 中模糊背景？...
weixin_39681621的博客
11-25 1134
把背景模糊一下，有时，效果会令人非常惊艳，但是，你真的懂，如何模糊背景吗？在今天的教程中，我们将告诉大家，如何使背景模糊，而又不会使我们的主体周围出现光晕。在这个过程中，我们首先需要先把主体抠出来，让主体与背景完美的分离，尔后再进背景进行模糊，这是一个非常基础的操作！原教程来自 PSD STACK 的分享，P大点S翻译（有修改）。人物图像素材来自 Tyler Nix 在 Unsplash 上的分享...
vue css设置图片宽度和高度变模糊的解决办法亲测有效
weixin_45721912的博客
03-20 3937
设置图片大小的话会模糊，下面的方法为你完美解决困扰 img { image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */ image-rendering: crisp-edges;
自定义高斯模糊"Dialog",使用起来只需要new and show
王亟亟的博客
07-30 3972
转载请注明出处：王亟亟的大牛之路先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android礼拜1做的一个功能里美工大姐姐需要显示一个点击弹窗+iOS形式的背景虚化的View,公司原有的高斯模糊 Dialog不能满足要求（确切的说是我用的不顺手，然后就手写了一个PopWindows来实现类似效果）之前想在git上搜一个成品Copy进去结果搜
基于Vue实现实现tab栏切换效果
05-31
好的，下面是基于Vue实现tab栏切换效果的代码： ```vue <template> <div class="tab"> <div class="tab-header"> <div v-for="(item, index) in tabs" :key="index" :class="{ active: activeIndex === index }" @click="activeIndex = index">{{ item.title }}</div> </div> <div class="tab-content"> <slot></slot> </div> </div> </template> <script> export default { name: 'Tab', data() { return { tabs: [], activeIndex: 0 } }, mounted() { this.tabs = this.$children } } </script> <style scoped> .tab-header { display: flex; justify-content: space-around; } .tab-header > div { padding: 10px; cursor: pointer; } .tab-header > .active { border-bottom: 2px solid #333; } .tab-content { margin-top: 10px; } </style> ``` 使用方法： ```vue <template> <div> <tab> <tab-item title="Tab 1">Tab 1 content</tab-item> <tab-item title="Tab 2">Tab 2 content</tab-item> <tab-item title="Tab 3">Tab 3 content</tab-item> </tab> </div> </template> <script> import Tab from './Tab.vue' import TabItem from './TabItem.vue' export default { name: 'App', components: { Tab, TabItem } } </script> ``` 其中，Tab组件作为tab栏的容器，TabItem组件作为每个tab项的内容。可以根据需要自定义样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值