css毛玻璃特效最简实现

Posted 2023-02-15 前端呆头鹅

毛玻璃的特点：透明、磨砂。
无图无真相：

上图中的弹窗效果就是毛玻璃特效。
html很简单。

<div class="flex-center background-img">
    <div class="content glass">家に連れてって</div>
</div>

可以看到html中有四个类，每个类有特定的职责：

1. flex-center类负责子元素居中；

.flex-center 
   height: 1000px;
   display: flex;
   align-items: center;
   justify-content: center;

2. background-img类设置背景图片；

.background-img 
   background: url('https://img1.baidu.com/it/u=765738194,3561086305&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;

3. content类设置子元素大小等几何属性；

.content 
   padding: 80px 60px;
   border-radius: 12px;
   width: 450px;
   font-size: 20px;
   font-weight: 500;

4. glass类设置毛玻璃效果。

.glass 
   background-color: rgba(255,255,255,.2);
   backdrop-filter: blur(15px);
   box-shadow: 0 0 10px #333;