Vue实现液态玻璃登录卡片的效果示例

芒果超人

效果介绍

液态玻璃（Liquid Glass）是一种极具现代感的UI视觉风格，常见于高端网站和操作系统界面。它通过多层叠加、模糊、光泽、滤镜等技术，模拟出玻璃的通透、折射和高光质感。苹果的这次系统设计更新，带火了这一设计效果，本教程将带你一步步实现一个带有3D灵动倾斜交互的液态玻璃登录卡片。
实际效果：

技术原理解析


1. 多层叠加

液态玻璃效果的核心是多层视觉叠加：

• 模糊层（blur）：让背景内容变得虚化，产生玻璃的通透感。
  
• 色调层（tint）：为玻璃加上一层淡淡的色彩，提升质感。
  
• 高光层（shine）：模拟玻璃边缘的高光和内阴影，增强立体感。
  
• SVG滤镜：通过 SVG 的
  1. feTurbulence

  复制代码
  和
  1. feDisplacementMap

  复制代码
  ，让玻璃表面产生微妙的扭曲和流动感。
  

2. 3D灵动倾斜

通过监听鼠标在卡片上的移动，动态计算并设置

1. transform: perspective(...) rotateX(...) rotateY(...)

复制代码

，让卡片随鼠标灵动倾斜，增强交互体验。

3. 背景与环境

背景可以是渐变色，也可以是图片。玻璃卡片通过

1. backdrop-filter

复制代码

与背景内容产生交互，形成真实的玻璃质感。

实现步骤详解


1. 结构搭建

1. <template>
   
2.   <div class="login-container animated-background">
   
3.     <!-- SVG滤镜库 -->
   
4.     <svg style="display: none">...</svg>
   
5.     <!-- 登录卡片 -->
   
6.     <div
   
7.       class="glass-component login-card"
   
8.       ref="tiltCard"
   
9.       @mousemove="handleMouseMove"
   
10.       @mouseleave="handleMouseLeave"
    
11.     >
    
12.       <div class="glass-effect"></div>
    
13.       <div class="glass-tint"></div>
    
14.       <div class="glass-shine"></div>
    
15.       <div class="glass-content">
    
16.         <!-- 登录表单内容 -->
    
17.       </div>
    
18.     </div>
    
19.   </div>
    
20. </template>

复制代码

2. SVG滤镜实现液态扭曲

1. <svg style="display: none">
   
2.   <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
   
3.     <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />
   
4.     <feComponentTransfer in="turbulence" result="mapped">
   
5.       <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
   
6.       <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
   
7.       <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
   
8.     </feComponentTransfer>
   
9.     <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
   
10.     <feSpecularLighting in="softMap" aceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">
    
11.       <fePointLight x="-200" y="-200" z="300" />
    
12.     </feSpecularLighting>
    
13.     <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
    
14.     <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />
    
15.   </filter>
    
16. </svg>

复制代码

• 这段 SVG 代码必须放在页面结构内，供 CSS filter 调用。
  

3. 背景设置

1. .animated-background {
   
2.   width: 100vw;
   
3.   height: 100vh;
   
4.   background-image: url('你的背景图片路径');
   
5.   background-size: cover;
   
6.   background-position: center;
   
7.   background-repeat: no-repeat;
   
8.   position: fixed;
   
9.   top: 0;
   
10.   left: 0;
    
11.   z-index: -1;
    
12. }

复制代码

• 建议用高质量渐变或壁纸，能更好衬托玻璃质感。
  

4. 卡片多层玻璃结构

1. .login-card {
   
2.   width: 400px;
   
3.   border-radius: 24px;
   
4.   overflow: hidden;
   
5.   box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);
   
6.   background: transparent;
   
7.   position: relative;
   
8. }
   
9. .glass-effect {
   
10.   position: absolute;
    
11.   inset: 0;
    
12.   z-index: 0;
    
13.   backdrop-filter: blur(5px);
    
14.   filter: url(#glass-distortion);
    
15.   isolation: isolate;
    
16.   border-radius: 24px;
    
17. }
    
18. .glass-tint {
    
19.   position: absolute;
    
20.   inset: 0;
    
21.   z-index: 1;
    
22.   background: rgba(0, 0, 0, 0.15);
    
23.   border-radius: 24px;
    
24. }
    
25. .glass-shine {
    
26.   position: absolute;
    
27.   inset: 0;
    
28.   z-index: 2;
    
29.   border: 1px solid rgba(255, 255, 255, 0.13);
    
30.   border-radius: 24px;
    
31.   box-shadow:
    
32.     inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),
    
33.     inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);
    
34.   pointer-events: none;
    
35. }
    
36. .glass-content {
    
37.   position: relative;
    
38.   z-index: 3;
    
39.   padding: 2rem;
    
40.   color: white;
    
41. }

复制代码

• 每一层都要有一致的 border-radius，才能保证圆角处无割裂。
  

5. 3D灵动倾斜交互

1. methods: {
   
2.   handleMouseMove (e) {
   
3.     const card = this.$refs.tiltCard
   
4.     const rect = card.getBoundingClientRect()
   
5.     const x = e.clientX - rect.left
   
6.     const y = e.clientY - rect.top
   
7.     const centerX = rect.width / 2
   
8.     const centerY = rect.height / 2
   
9.     const maxTilt = 18
   
10.     const rotateY = ((x - centerX) / centerX) * maxTilt
    
11.     const rotateX = -((y - centerY) / centerY) * maxTilt
    
12.     card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`
    
13.   },
    
14.   handleMouseLeave () {
    
15.     const card = this.$refs.tiltCard
    
16.     card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'
    
17.   }
    
18. }

复制代码

• 鼠标移动时，卡片会根据指针位置灵动倾斜。
  
• 鼠标移出时，卡片平滑恢复。
  

6. 细节优化

• 阴影柔和：避免黑色边缘过重，提升高级感。
  
• 高光线条：用低透明度白色边框和内阴影，模拟玻璃高光。
  
• 所有层的圆角一致：防止割裂。
  
• 表单输入框：用半透明背景和模糊，保持整体风格统一。
  

7.完整代码

1. <template>
   
2.   <div class="login-container animated-background">
   
3.     <!-- SVG滤镜库 -->
   
4.     <svg style="display: none">
   
5.       <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
   
6.         <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />
   
7.         <feComponentTransfer in="turbulence" result="mapped">
   
8.           <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
   
9.           <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
   
10.           <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
    
11.         </feComponentTransfer>
    
12.         <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
    
13.         <feSpecularLighting in="softMap" aceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">
    
14.           <fePointLight x="-200" y="-200" z="300" />
    
15.         </feSpecularLighting>
    
16.         <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
    
17.         <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />
    
18.       </filter>
    
19.     </svg>
    
20. 
    
21.     <!-- 登录卡片 -->
    
22.     <div
    
23.       class="glass-component login-card"
    
24.       ref="tiltCard"
    
25.       @mousemove="handleMouseMove"
    
26.       @mouseleave="handleMouseLeave"
    
27.     >
    
28.       <div class="glass-effect"></div>
    
29.       <div class="glass-tint"></div>
    
30.       <div class="glass-shine"></div>
    
31.       <div class="glass-content">
    
32.         <h2 class="login-title">欢迎登录</h2>
    
33.         <form class="login-form">
    
34.           <div class="form-group">
    
35.             <input type="text" placeholder="用户名" class="glass-input">
    
36.           </div>
    
37.           <div class="form-group">
    
38.             <input type="password" placeholder="密码" class="glass-input">
    
39.           </div>
    
40.           <button type="submit" class="glass-button">登录</button>
    
41.         </form>
    
42.       </div>
    
43.     </div>
    
44.   </div>
    
45. </template>
    
46. 
    
47. <script>
    
48. export default {
    
49.   name: 'LiquidGlass',
    
50.   data () {
    
51.     return {
    
52.       // 可以添加需要的数据
    
53.     }
    
54.   },
    
55.   methods: {
    
56.     handleMouseMove (e) {
    
57.       const card = this.$refs.tiltCard
    
58.       const rect = card.getBoundingClientRect()
    
59.       const x = e.clientX - rect.left
    
60.       const y = e.clientY - rect.top
    
61.       const centerX = rect.width / 2
    
62.       const centerY = rect.height / 2
    
63.       // 最大旋转角度
    
64.       const maxTilt = 18
    
65.       const rotateY = ((x - centerX) / centerX) * maxTilt
    
66.       const rotateX = -((y - centerY) / centerY) * maxTilt
    
67.       card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`
    
68.     },
    
69.     handleMouseLeave () {
    
70.       const card = this.$refs.tiltCard
    
71.       card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'
    
72.     }
    
73.   }
    
74. }
    
75. </script>
    
76. 
    
77. <style lang="scss" scoped>
    
78. .login-container {
    
79.   min-height: 100vh;
    
80.   display: flex;
    
81.   align-items: center;
    
82.   justify-content: center;
    
83.   position: relative;
    
84.   overflow: hidden;
    
85. }
    
86. 
    
87. .animated-background {
    
88.   width: 100%;
    
89.   height: 100%;
    
90.   background-image: url('../../assets/macwallpaper.jpg');
    
91.   background-size: cover;
    
92.   background-position: center;
    
93.   background-repeat: no-repeat;
    
94. }
    
95. 
    
96. .login-card {
    
97.   width: 400px;
    
98.   position: relative;
    
99.   border-radius: 24px;
    
100.   overflow: hidden;
     
101.   box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);
     
102.   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);
     
103.   cursor: pointer;
     
104.   background: transparent;
     
105. }
     
106. 
     
107. .glass-effect {
     
108.   position: absolute;
     
109.   inset: 0;
     
110.   z-index: 0;
     
111.   backdrop-filter: blur(5px);
     
112.   filter: url(#glass-distortion);
     
113.   isolation: isolate;
     
114.   border-radius: 24px;
     
115. }
     
116. 
     
117. .glass-tint {
     
118.   position: absolute;
     
119.   inset: 0;
     
120.   z-index: 1;
     
121.   background: rgba(0, 0, 0, 0.15);
     
122.   border-radius: 24px;
     
123. }
     
124. 
     
125. .glass-shine {
     
126.   position: absolute;
     
127.   inset: 0;
     
128.   z-index: 2;
     
129.   border: 1px solid rgba(255, 255, 255, 0.13);
     
130.   border-radius: 24px;
     
131.   box-shadow:
     
132.     inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),
     
133.     inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);
     
134.   pointer-events: none;
     
135. }
     
136. 
     
137. .glass-content {
     
138.   position: relative;
     
139.   z-index: 3;
     
140.   padding: 2rem;
     
141.   color: white;
     
142. }
     
143. 
     
144. .login-title {
     
145.   text-align: center;
     
146.   color: #fff;
     
147.   margin-bottom: 2rem;
     
148.   font-size: 2rem;
     
149.   font-weight: 600;
     
150.   text-shadow: 0 1px 3px rgba(0,0,0,0.2);
     
151. }
     
152. 
     
153. .form-group {
     
154.   margin-bottom: 1.5rem;
     
155. }
     
156. 
     
157. .glass-input {
     
158.   width: 90%;
     
159.   padding: 12px 20px;
     
160.   border: none;
     
161.   border-radius: 10px;
     
162.   background: rgba(255, 255, 255, 0.1);
     
163.   color: #fff;
     
164.   font-size: 1rem;
     
165.   backdrop-filter: blur(5px);
     
166.   transition: all 0.3s ease;
     
167. 
     
168.   &::placeholder {
     
169.     color: rgba(255, 255, 255, 0.7);
     
170.   }
     
171. 
     
172.   &:focus {
     
173.     outline: none;
     
174.     background: rgba(255, 255, 255, 0.2);
     
175.     box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
     
176.   }
     
177. }
     
178. 
     
179. .glass-button {
     
180.   width: 100%;
     
181.   padding: 12px;
     
182.   border: none;
     
183.   border-radius: 10px;
     
184.   background: rgba(255, 255, 255, 0.2);
     
185.   color: #fff;
     
186.   font-size: 1rem;
     
187.   font-weight: 600;
     
188.   cursor: pointer;
     
189.   transition: all 0.3s ease;
     
190.   backdrop-filter: blur(5px);
     
191.   position: relative;
     
192.   overflow: hidden;
     
193. 
     
194.   &:hover {
     
195.     background: rgba(255, 255, 255, 0.3);
     
196.     transform: translateY(-2px);
     
197.     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
     
198.   }
     
199. 
     
200.   &:active {
     
201.     transform: translateY(0);
     
202.   }
     
203. }
     
204. 
     
205. // 添加点击波纹效果
     
206. .click-gradient {
     
207.   position: absolute;
     
208.   border-radius: 50%;
     
209.   background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(180,180,255,0.2) 40%, rgba(100,100,255,0.1) 70%, rgba(50,50,255,0) 100%);
     
210.   transform: translate(-50%, -50%) scale(0);
     
211.   opacity: 0;
     
212.   pointer-events: none;
     
213.   z-index: 4;
     
214. }
     
215. 
     
216. .glass-component.clicked .click-gradient {
     
217.   animation: gradient-ripple 0.6s ease-out;
     
218. }
     
219. 
     
220. @keyframes gradient-ripple {
     
221.   0% {
     
222.     transform: translate(-50%, -50%) scale(0);
     
223.     opacity: 1;
     
224.   }
     
225.   100% {
     
226.     transform: translate(-50%, -50%) scale(3);
     
227.     opacity: 0;
     
228.   }
     
229. }
     
230. 
     
231. .glass-component {
     
232.   transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
     
233.   will-change: transform;
     
234. }
     
235. </style>

复制代码

常见问题与优化建议

• 阴影过重/黑边：减小 box-shadow 的透明度和模糊半径。
  
• 圆角割裂：所有玻璃层都要加 border-radius。
  
• 背景不通透：确保 glass-effect 层有 blur 和 SVG filter。
  
• 性能问题：backdrop-filter 在低端设备上可能有性能损耗，建议只在必要区域使用。
  
• 浏览器兼容性：backdrop-filter 需现代浏览器支持，IE/部分安卓浏览器不兼容。
  

技术要点总结

• SVG滤镜：让玻璃表面有微妙的流动和扭曲感。
  
• backdrop-filter: blur：实现背景虚化。
  
• 多层叠加：色调、高光、阴影共同营造真实玻璃质感。
  
• 3D transform：提升交互体验。
  
• 细节打磨：阴影、边框、圆角、色彩都要精细调整。
  

结语

液态玻璃效果是现代前端视觉的代表之一。只要理解其原理，分层实现、细致调优，任何人都能做出媲美 macOS、Win11 的高端玻璃UI。希望本教程能帮助你掌握这项技术，做出属于自己的酷炫界面！
到此这篇关于Vue实现一个“液态玻璃”效果登录卡片的文章就介绍到这了,更多相关Vue实现液态玻璃登录卡片内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！