毛玻璃

说说MIUI 6的毛玻璃效果的技术实现。 很久以前我们的文件夹打开和最近任务等几个地方就使用了毛玻璃效果，在技术上讲就是背景模糊。应该是比iOS 7的使用要早很多。不过那时候我们使用的是先对背景截图，再将其模糊处理，然后作为app的背景图，所以是一张静止的图片，当背景内容发生变化时模糊的图片并不会随之变化，因此比较生硬。而iOS 7的背景模糊则是实时的，当背景变化的时候，模糊内容也会实时的变化。这就把我们给比下去了。于是我们也不能闲着，既然做了，那就做好。然后我就开始做实时的背景模糊。 如果沿用之前的方式，先截图，再模糊，由于这个过程远远大于一帧的时间16.7毫秒。因此就算不停的更新背景，虽然也能呈现出变化的模糊背景，但会很卡顿，不流畅，不自然，资源消耗大。 于是考虑更为自然的实现方式：在Window上添加标记，SurfaceFlinger合并层的时候对其后面的内容用OpenGL ES进行模糊处理。 这种方式没有截图的过程，绘制的时候用OpenGL ES绘制，加上一些优化，最终轻松达到60FPS的满帧率。 下面说说代码的主要过程和一些关键点。 需要背景模糊的Window给自己添加一个标记： FLAG_BLUR_BEHIND ，这个标记是Android SDK提供的，因为Android的早期版本是有支持背景模糊的，不过由于他们不是用的OpenGL ES实时绘制，性能比较差

原文: win10 uwp 毛玻璃 版权声明：博客已迁移到 http://lindexi.gitee.io 欢迎访问。如果当前博客图片看不到，请到 http://lindexi.gitee.io 访问博客。本文地址 https://blog.csdn.net/lindexi_gd/article/details/73456809 毛玻璃在UWP很简单，不会和WPF那样伤性能。 本文告诉大家，如何在 UWP 使用 win2d 做毛玻璃。 毛玻璃可以使用 win2D 方法，也可以使用 Compositor 。 使用 win2d 得到软件内控件毛玻璃，而使用 Compositor 可以获得窗口毛玻璃。 先来说下如何使用 Compositor 做窗口毛玻璃，感觉小伙伴感兴趣的是窗口毛玻璃。 Compositor 创建毛玻璃 先写最简单的页面，只有一个 Grid， 给他名称 GlassHost，这个控件用于显示毛玻璃 <Grid x:Name="GlassHost"></Grid> 然后在构造函数使用InitializeFrostedGlass，这个函数用于在一个控件显示毛玻璃 public MainPage() { InitializeComponent(); InitializeFrostedGlass(GlassHost); } private void

原理：将所有像素点随机赋值比其大某个不大的值，如：0-8间的某个值 import cv2import numpy as npimport randomimg = cv2.imread('D:/pythonob/imageinpaint/img/zidan.jpg',1)imgInfo = img.shapeheight = imgInfo[0]width = imgInfo[1]dst = np.zeros((height,width,3),np.uint8)for i in range(0,height-8): for j in range(0,width-8): index = int(random.random()*8)#随机数0-8 (b,g,r) = img[i+index,j+index] dst[i,j] = (b,g,r)cv2.imshow('maoboli',dst)cv2.waitKey(0)效果图： 来源： https://www.cnblogs.com/cxxBoo/p/11454504.html

文章摘自： https://www.cnblogs.com/penghuwan/p/11391215.html#_label1 目录 前言 一.浮光掠影 二.发光球体 三.圆环进度条 四.三角形 五.有色到透明的渐变 六.模糊效果和毛玻璃效果 七.斜角标签 技术总结 正文 回到顶部 前言 在本文中我讲述了7种CSS的动效，它们也许看起来并不惊艳，但是我认为却足够传达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度看待标签和样式属性，从而用「绕个弯」的方式达到效果。 回到顶部 一.浮光掠影 首先我们看第一个实现效果：在鼠标浮动到图片上方时，让一片白影一闪而过。 实现思路 画一个竖直的长方形的白色div，设置opcity将其变为半透明 借助transform:skewX将长方形变成等高的平行四边形 白条div绝对定位，外层div相对定位，一开始left属性默认是0 在:hover伪元素中修改left值，例如left=600px（超出图片长度），通过transition指定left和时间，形成过渡 图示 HTML <div class="flash"> <div class="flash-bar"></div> <img src="{图片地址}" /> </div> CSS .flash { position: relative; width: 500px;

前言 在本文中我讲述了7种CSS的动效，它们也许看起来并不惊艳，但是我认为却足够传达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度看待标签和样式属性，从而用「绕个弯」的方式达到效果。 一.浮光掠影 首先我们看第一个实现效果：在鼠标浮动到图片上方时，让一片白影一闪而过。 实现思路 画一个竖直的长方形的白色div，设置opcity将其变为半透明 借助transform:skewX将长方形变成等高的平行四边形 白条div绝对定位，外层div相对定位，一开始left属性默认是0 在:hover伪元素中修改left值，例如left=600px（超出图片长度），通过transition指定left和时间，形成过渡 图示 HTML <div class="flash"> <div class="flash-bar"></div> <img src="{图片地址}" /> </div> CSS .flash { position: relative; width: 500px; } .flash img { width: 100%; } .flash-bar { position: absolute; left:-100px; width: 20px; height: 100%; background: #fff; opacity: 0.5; transform: