首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

纯CSS 毛玻璃效果 💎

在我年轻时做过的开发中,毛玻璃应用得最广是在复杂的背景图上。 如果你希望在一个复杂的背景上添加文字,文字能清晰展示,并尽可能的保留原背景的话,使用毛玻璃的效果去处理是非常合适的。...本文主要讲解背景毛玻璃效果,也会讲讲文字如何做出模糊效果。...背景图毛玻璃 在 PhotoShop 中,毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中,想要实现模糊效果,可以使用 滤镜 。...有了它就实现了毛玻璃的基本效果。 最后加上 box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3); 让毛玻璃与背景之间产生一点阴影,看起来会更自然。...文字毛玻璃 文字版的毛玻璃效果其实也是一个模糊效果。 这个案例是鼠标移入文字时,文字变清晰;鼠标移出后变模糊。也是 纯CSS 可以做出来的。

3.8K30

css毛玻璃背景的制作

听到有人说拼多多上市, 然后各种黑, 说什么市场倒退了二十年, 然后搬出那英当年的"雾里看花",说这首歌就是在讽刺假货横行~ "雾里看花"代表了一种"朦胧美", 如果你喜欢朦胧美, 那你也可能也会喜欢毛玻璃..."毛玻璃"效果, 本质上是对背景图片的部分区域进行模糊运算, 比如我们在photoshop经常使用的高斯模糊, 这种模糊其实是在UI设计中非常常见, 比如Mac上的siri ?...Mac上siri的毛玻璃效果 ?...DOCTYPE html> 毛玻璃效果 <style...以这个毛玻璃效果为例, 人工智能或许能在一瞬间完成这种效果, 而人类需要3分钟, 但人类在3分钟内,可能会涌现更好的想法, 并将想法添加到原本的步骤中, 人类与人工智能的区别想必已经很明显了~

1.4K20

CSS3实现毛玻璃效果

最近在开发个人博客的时候,在网上学到了一种CSS特效---毛玻璃 感觉还是比较实用下面将这种特效分享给大家。...如下图,我的后台登录界面表单部分就是毛玻璃效果 有时候这种特效很有用,可以达到一种朦胧的效果,接下来我们来看看如何实现它 图片 首先定义布局 <!...效果如下: 图片 接下来添加毛玻璃特效 通过伪类元素实现 .box::before{ content:''; position:absolute; top:0; right...到这里毛玻璃效果已经完成 图片 我们还可以给他加一层滤镜颜色,使其黯淡下来 .box::after{ content:""; position:absolute; top:0...right:0; bottom:0; left:0; background:rgba(0,0,0,0.2); } 效果如下 图片 此时发生我们之前的文字不见了,设置因为毛玻璃效果覆盖了

93910

win10 uwp 毛玻璃 Compositor 创建毛玻璃win2D最简单方法

毛玻璃在UWP很简单,不会和WPF那样伤性能。 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃毛玻璃可以使用 win2D 方法,也可以使用 Compositor 。...使用 win2d 得到软件内控件毛玻璃,而使用 Compositor 可以获得窗口毛玻璃。 先来说下如何使用 Compositor 做窗口毛玻璃,感觉小伙伴感兴趣的是窗口毛玻璃。...Compositor 创建毛玻璃 先写最简单的页面,只有一个 Grid, 给他名称 GlassHost,这个控件用于显示毛玻璃 ...win2D 下面介绍使用 win2d 做毛玻璃 使用 win2D 方法,需要使用 Nuget 安装,如果速度太慢,推荐使用博客园的镜像 ? 这个方法可以获得控件的毛玻璃,但是不可以获得窗口毛玻璃 ?...为了显示最短的代码,让大家知道毛玻璃是如何做的,下面先来做效果。

1.1K10

iOS高斯模糊&毛玻璃效果开发探索

iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效果达到图片模糊效果...苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如通知中心界面;其实在iOS7.0(包括)之前还是有系统的类可以实现毛玻璃效果的, 就是 UIToolbar这个类 在iOS8.0...之后,苹果新增了一个类UIVisualEffectView,通过这个类来实现毛玻璃效果与上面的UIToolbar一样,而且效率也非常之高,使用也是非常简单,几行代码搞定...., 将effectView添加到要实现了毛玻璃的效果的view控件上,效果图和上面的一样....iOS8.0 毛玻璃的样式(枚举) UIBlurEffectStyleExtraLight, UIBlurEffectStyleLight, UIBlurEffectStyleDarkUIBlurEffect

4.4K20
领券