毛玻璃

coderljw 2024-10-13

Magic
特效

大约 2 分钟

# backdrop-filter: blur()

透明度 + 模糊，火狐默认无效，移动端兼容性不大友好

<main>
  <section>
    <span>前天看到了小兔子</span>
    <span>昨天是小鹿</span>
    <span>今天是你</span>
  </section>
</main>

1
2
3
4
5
6
7

main {
  height: 400px;
  background: url(../../images/Wives/BingBing-1.webp) center/cover no-repeat;
}

section {
  position: absolute;
  width: 400px;
  height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: hsla(0, 0%, 100%, 0.3); /* 透明度 */
  border-radius: 12px;
  overflow: hidden;

  box-sizing: border-box;
  padding: 40px;
  display: grid;
  place-items: center start;
  font-size: 18px;
  color: #ffb8c4ff;
  writing-mode: vertical-rl;
  letter-spacing: 8px;
  user-select: none;
}

section::before {
  content: ' ';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(5px); /* 背后元素模糊 */
}

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

# background-attachment: fixed + filter: blur()

背景叠加 + 模糊

<main>
  <section>
    <span>前天看到了小兔子</span>
    <span>昨天是小鹿</span>
    <span>今天是你</span>
  </section>
</main>

1
2
3
4
5
6
7

main {
  height: 400px;
  background: url(../../images/Wives/BingBing-1.webp) center/cover fixed
    no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

section {
  position: relative;
  z-index: 1;
  width: 400px;
  height: 300px;
  background: inherit; /* 背景叠加 */
  border-radius: 12px;
  overflow: hidden;

  box-sizing: border-box;
  padding: 40px;
  display: grid;
  place-items: center start;
  font-size: 18px;
  color: #ffb8c4ff;
  writing-mode: vertical-rl;
  letter-spacing: 8px;
  user-select: none;
}

section::before {
  content: ' ';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: inherit; /* 背景叠加 */
  box-shadow: inset 0 0 0 200px hsla(0, 0%, 100%, 0.3); /* 蒙层 */
  filter: blur(7px); /* 自身元素模糊 */
}

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

注意

奇怪！ background-attachment: fixed; 在此 Demo 中不生效，可恶！！！

# 磨砂渐变背景

<main>
  <span>Magic</span>
  <section></section>
  <section></section>
  <section></section>
</main>

1
2
3
4
5
6

main {
  height: 400px;
  overflow: hidden;
  position: relative;
}

main::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  backdrop-filter: blur(150px);
  z-index: 1;
}

span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 7em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #f66, #f90);
  animation: hue-rotate 5s linear infinite;
}

section {
  position: absolute;
  opacity: 0.7;
}

section:nth-child(1) {
  left: 50%;
  bottom: 20%;
  width: 80%;
  height: 70%;
  transform: translateX(-50%);
  background: linear-gradient(#ffee55, #fdee99);
  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
  animation: hue-rotate 5s linear infinite;
}

section:nth-child(2) {
  left: 30%;
  bottom: 0;
  width: 90%;
  height: 70%;
  transform: translateX(-50%);
  background: linear-gradient(#e950d1, #f980d9);
  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
  animation: hue-rotate 5s linear infinite;
}

section:nth-child(3) {
  right: 30%;
  bottom: 0;
  width: 90%;
  height: 70%;
  transform: translateX(50%);
  background: linear-gradient(#5750e9, #5752b6);
  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  animation: hue-rotate 5s linear infinite;
}

@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

滚动视差