效果描述
看下面element-ui主页的header效果，滚动过程中，头部导航栏是个模糊的效果；
实现代码
通过设置头部header的background-image和backdrop-filter属性实现；
.header {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
// 主要代码下面三行
background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px) grayscale(30%);
}
background-image:radial-gradient() 介绍
定义
radial-gradient()为css3中的函数，可以创建一个 从原点辐射的 两种或多种颜色之间的 渐进过渡组成的 圆形/椭圆形 的图像；
语法
/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)
backdrop-filter 介绍
定义
backdrop-filter是让当前元素所在区域后面的内容模糊灰度或高亮之类；
由于它会让其后的元素进行模糊，所以此元素本事必须带有透明度；
语法
支持很多种函数，具体见mdn文档developer.mozilla.org/en-US/docs/…
代码解读
了解了上面2个属性，就知道background-image: radial-gradient()就是让header的背景变为一个个小圆点（中心白色，四周透明）；backdrop-filter再添加模糊/灰度等效果，就可以有element-ui头部的效果了
全部代码
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
.header {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px) grayscale(30%);
}
.container {
padding-top: 400px;
border-radius: 25px;
overflow: hidden;
height: 200vh;
}
.circle {
width: 200%;
height: 40px;
border-radius: 25px;
background: #fff;
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="circle">hello, i'm david.</div>
<div>i'm from another world</div>
</div>
</body>
</html>
