效果

在自定义 css 文件内加入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.snackbar-container {
  background-color: rgba(51, 27, 227, .8) !important;
  color: #fff!important;
  border-radius: 0!important;
  display: flex;
  justify-content: center;
  max-width: none!important;
  min-width: 100%!important;
  margin: 0;
  left: 0!important;
  height: 60px!important;
  transform: none!important;
  backdrop-filter: blur(84px);
}

.snackbar-container p {
  font-weight: 600!important;
  text-align: center!important;
  font-size: 1rem!important
}

.snackbar-container::after {
  position: absolute;
  width: 0;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
  opacity: .1;
  content: "";
  animation: snackbar-progress 2s linear forwards;
  pointer-events: none
}

@keyframes snackbar-progress {
  from {
      width: 0
  }

  to {
      width: 100%
  }
}