@smbcloud / fatapp-web
Code Commits Issues Pulls Cloud Agent CI/CD
dependabot/npm_and_yarn/astrojs/sitemap-3.7.4
dependabot/npm_and_yarn/astro-7.4.0 dependabot/npm_and_yarn/astrojs/mdx-7.0.8 dependabot/npm_and_yarn/astrojs/sitemap-3.7.4 dependabot/npm_and_yarn/katex-0.19.0 dependabot/npm_and_yarn/prettier-3.9.10 dependabot/npm_and_yarn/sharp-0.35.5 dependabot/npm_and_yarn/tsx-4.23.15 dependabot/npm_and_yarn/typescript-eslint-8.71.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.71.2 development main
astro 160 lines 4.02 KB
Raw
1 <div class="variable-blur-mask">
2 <div class="blur-bottom">
3 <!-- Layer 1 -->
4 <div
5 class="blur-layer layer-1"
6 style={{
7 maskImage:
8 'linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 12.5%, rgba(255,255,255,1) 25%, rgba(0,0,0,0) 37.5%)',
9 WebkitMaskImage:
10 'linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 12.5%, rgba(255,255,255,1) 25%, rgba(0,0,0,0) 37.5%)'
11 }}
12 >
13 </div>
14 <!-- Layer 2 -->
15 <div
16 class="blur-layer layer-2"
17 style={{
18 maskImage:
19 'linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 37.5%, rgba(0,0,0,0) 50%)',
20 WebkitMaskImage:
21 'linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 37.5%, rgba(0,0,0,0) 50%)'
22 }}
23 >
24 </div>
25 <!-- Layer 3 -->
26 <div
27 class="blur-layer layer-3"
28 style={{
29 maskImage:
30 'linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 37.5%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 62.5%)',
31 WebkitMaskImage:
32 'linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 37.5%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 62.5%)'
33 }}
34 >
35 </div>
36 <!-- Layer 4 -->
37 <div
38 class="blur-layer layer-4"
39 style={{
40 maskImage:
41 'linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 62.5%, rgba(0,0,0,0) 75%)',
42 WebkitMaskImage:
43 'linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 62.5%, rgba(0,0,0,0) 75%)'
44 }}
45 >
46 </div>
47 <!-- Layer 5 -->
48 <div
49 class="blur-layer layer-5"
50 style={{
51 maskImage:
52 'linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 62.5%, rgba(255,255,255,1) 75%, rgba(0,0,0,0) 87.5%)',
53 WebkitMaskImage:
54 'linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 62.5%, rgba(255,255,255,1) 75%, rgba(0,0,0,0) 87.5%)'
55 }}
56 >
57 </div>
58 <!-- Layer 6 -->
59 <div
60 class="blur-layer layer-6"
61 style={{
62 maskImage:
63 'linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 87.5%, rgba(0,0,0,0) 100%)',
64 WebkitMaskImage:
65 'linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 87.5%, rgba(0,0,0,0) 100%)'
66 }}
67 >
68 </div>
69 <!-- Layer 7 -->
70 <div
71 class="blur-layer layer-7"
72 style={{
73 maskImage:
74 'linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(255,255,255,1) 87.5%, rgba(255,255,255,1) 100%)',
75 WebkitMaskImage:
76 'linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(255,255,255,1) 87.5%, rgba(255,255,255,1) 100%)'
77 }}
78 >
79 </div>
80 <!-- Layer 8 -->
81 <div
82 class="blur-layer layer-8"
83 style={{
84 maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(255,255,255,1) 100%)',
85 WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(255,255,255,1) 100%)'
86 }}
87 >
88 </div>
89 </div>
90 <slot />
91 </div>
92
93 <style>
94 .variable-blur-mask {
95 position: fixed;
96 top: 0;
97 left: 0;
98 width: 100%;
99 height: 4rem;
100 z-index: 99;
101 pointer-events: none;
102 }
103
104 .blur-bottom {
105 position: absolute;
106 top: 0;
107 left: 0;
108 width: 100%;
109 height: 100%;
110 pointer-events: none;
111 }
112
113 .blur-layer {
114 position: absolute;
115 top: 0;
116 left: 0;
117 width: 100%;
118 height: 100%;
119 }
120
121 .layer-1 {
122 z-index: 1;
123 backdrop-filter: blur(0.5px);
124 }
125
126 .layer-2 {
127 z-index: 2;
128 backdrop-filter: blur(1px);
129 }
130
131 .layer-3 {
132 z-index: 3;
133 backdrop-filter: blur(2px);
134 }
135
136 .layer-4 {
137 z-index: 4;
138 backdrop-filter: blur(4px);
139 }
140
141 .layer-5 {
142 z-index: 5;
143 backdrop-filter: blur(8px);
144 }
145
146 .layer-6 {
147 z-index: 6;
148 backdrop-filter: blur(16px);
149 }
150
151 .layer-7 {
152 z-index: 7;
153 backdrop-filter: blur(32px);
154 }
155
156 .layer-8 {
157 z-index: 8;
158 backdrop-filter: blur(64px);
159 }
160 </style>