“我要个六边形毛玻璃效果”
毛玻璃效果
毛玻璃质感(Glassmorphism):本质上是模糊,上方是带有透明度的遮罩模糊,下方元素像有一层蒙层。通透轻盈,呼吸感强,具有虚实结合的美感。
那如何实现呢?简单,一行代码
// CSS
backdrop-filter:blur(12px);
CSS滤镜backdrop-filter
属性
blur()
:模糊;brightness()
:亮度;contrast()
:对比度drop-shadow()
:投影grayscale()
:灰度;hue-rotate()
:色调变化;invert()
:反向;opacity()
:透明度;saturate()
:饱和度;sepia()
:褐色;
既然都是滤镜,那么backdrop-filter
和filter
有什么区别呢?
filter
:该属性将模糊或颜色偏移等图形效果应用于元素。backdrop-filter
:该属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
filter
是作用于元素本身,而 backdrop-filter
是作用于元素背后的区域所覆盖的所有元素。
除此之外filter
和backdrop-filter
所支持的属性完全一致。
因此,如果模糊效果使用filter
中的blur()
,则会使其子元素全部模糊。
兼容性:
UI:导航栏,卡片,小按钮,背景全部给我安排上!
异形毛玻璃
UI:把图片上的小玻璃统统加上毛玻璃! 我:自己切去!
由于有位移动画,无法让UI直接导出毛玻璃透视的图片,只能手工加了🤦♀️
另辟蹊径:
使用用SVG绘制路径,再利用clipPath剪切路径。(如果边界超出,可用加一个透明边界border: 1px solid transparent
)
//css
.ban2 {
position: absolute;
top: 107px;
right: 139px;
z-index: 17;
border: 1px solid transparent;//不加边界毛玻璃效果是个方块
-webkit-clip-path: url(#banGlass);
clip-path: url(#banGlass);
backdrop-filter: saturate(180%) blur(2px);//毛玻璃效果
background: linear-gradient(
45deg,
rgba(64, 140, 253, 0.12),
rgba(146, 202, 255, 0.12)
);
animation: banImgAnim 2.5s infinite alternate linear;//无聊的起伏动画
}
//html
//svg引用
<div class="ban2">
<svg width="100%" height="100%" viewBox="0 0 228.64 220.15">
<use xlink:href="#glassImg" />
</svg>
</div>
//svg绘制
<svg width="100%" height="100%" viewBox="0 0 228.64 220.15">
<defs id="glassImg">
<clipPath id="banGlass">
<linearGradient
id="路径_10_"
gradientUnits="userSpaceOnUse"
x1="-847.1108"
y1="651.968"
x2="-847.1904"
y2="651.165"
gradientTransform="matrix(228.6432 0 0 -220.15 193813.2344 143552.0938)"
>
<stop offset="0" style="stop-color: #92caff" />
<stop offset="1" style="stop-color: #408cfd" />
</linearGradient>
<polygon
id="路径_1_"
class="st5"
points="84,0 198.4,44.8 232.3,154.9 152,220.1 37.6,175.3 3.7,65.3 "
/>
</clipPath>
</defs>
</svg>
哦豁,完成!
转载自:https://juejin.cn/post/7167260129853702175