\\n <feComponentTransfer in=\\"turbulence\\" result=\\"mapped\\">\\n <feFuncR type=\\"gamma\\" amplitude=\\"1\\" exponent=\\"10\\" offset=\\"0.5\\" />\\n <feFuncG type=\\"gamma\\" amplitude=\\"0\\" exponent=\\"1\\" offset=\\"0\\" />\\n <feFuncB type=\\"gamma\\" amplitude=\\"0\\" exponent=\\"1\\" offset=\\"0.5\\" />\\n </feComponentTransfer>\\n <feGaussianBlur in=\\"turbulence\\" stdDeviation=\\"3\\" result=\\"softMap\\" />\\n <feSpecularLighting in=\\"softMap\\" surfaceScale=\\"5\\" specularConstant=\\"1\\" specularExponent=\\"100\\" lighting-color=\\"white\\" result=\\"specLight\\">\\n <fePointLight x=\\"-200\\" y=\\"-200\\" z=\\"300\\" />\\n </feSpecularLighting>\\n <feComposite in=\\"specLight\\" operator=\\"arithmetic\\" k1=\\"0\\" k2=\\"1\\" k3=\\"1\\" k4=\\"0\\" result=\\"litImage\\" />\\n <feDisplacementMap in=\\"SourceGraphic\\" in2=\\"softMap\\" scale=\\"200\\" xChannelSelector=\\"R\\" yChannelSelector=\\"G\\" />\\n </filter>\\n</svg>\\n\\n
.animated-background {\\n width: 100vw;\\n height: 100vh;\\n background-image: url(\'你的背景图片路径\');\\n background-size: cover;\\n background-position: center;\\n background-repeat: no-repeat;\\n position: fixed;\\n top: 0;\\n left: 0;\\n z-index: -1;\\n}\\n
\\n.login-card {\\n width: 400px;\\n border-radius: 24px;\\n overflow: hidden;\\n box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);\\n background: transparent;\\n position: relative;\\n}\\n.glass-effect {\\n position: absolute;\\n inset: 0;\\n z-index: 0;\\n backdrop-filter: blur(5px);\\n filter: url(#glass-distortion);\\n isolation: isolate;\\n border-radius: 24px;\\n}\\n.glass-tint {\\n position: absolute;\\n inset: 0;\\n z-index: 1;\\n background: rgba(0, 0, 0, 0.15);\\n border-radius: 24px;\\n}\\n.glass-shine {\\n position: absolute;\\n inset: 0;\\n z-index: 2;\\n border: 1px solid rgba(255, 255, 255, 0.13);\\n border-radius: 24px;\\n box-shadow:\\n inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),\\n inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);\\n pointer-events: none;\\n}\\n.glass-content {\\n position: relative;\\n z-index: 3;\\n padding: 2rem;\\n color: white;\\n}\\n
\\nmethods: {\\n handleMouseMove (e) {\\n const card = this.$refs.tiltCard\\n const rect = card.getBoundingClientRect()\\n const x = e.clientX - rect.left\\n const y = e.clientY - rect.top\\n const centerX = rect.width / 2\\n const centerY = rect.height / 2\\n const maxTilt = 18\\n const rotateY = ((x - centerX) / centerX) * maxTilt\\n const rotateX = -((y - centerY) / centerY) * maxTilt\\n card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`\\n },\\n handleMouseLeave () {\\n const card = this.$refs.tiltCard\\n card.style.transform = \'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)\'\\n }\\n}\\n
\\n<template>\\n <div class=\\"login-container animated-background\\">\\n <!-- SVG滤镜库 --\x3e\\n <svg style=\\"display: none\\">\\n <filter id=\\"glass-distortion\\" x=\\"0%\\" y=\\"0%\\" width=\\"100%\\" height=\\"100%\\" filterUnits=\\"objectBoundingBox\\">\\n <feTurbulence type=\\"fractalNoise\\" baseFrequency=\\"0.001 0.005\\" numOctaves=\\"1\\" seed=\\"17\\" result=\\"turbulence\\" />\\n <feComponentTransfer in=\\"turbulence\\" result=\\"mapped\\">\\n <feFuncR type=\\"gamma\\" amplitude=\\"1\\" exponent=\\"10\\" offset=\\"0.5\\" />\\n <feFuncG type=\\"gamma\\" amplitude=\\"0\\" exponent=\\"1\\" offset=\\"0\\" />\\n <feFuncB type=\\"gamma\\" amplitude=\\"0\\" exponent=\\"1\\" offset=\\"0.5\\" />\\n </feComponentTransfer>\\n <feGaussianBlur in=\\"turbulence\\" stdDeviation=\\"3\\" result=\\"softMap\\" />\\n <feSpecularLighting in=\\"softMap\\" surfaceScale=\\"5\\" specularConstant=\\"1\\" specularExponent=\\"100\\" lighting-color=\\"white\\" result=\\"specLight\\">\\n <fePointLight x=\\"-200\\" y=\\"-200\\" z=\\"300\\" />\\n </feSpecularLighting>\\n <feComposite in=\\"specLight\\" operator=\\"arithmetic\\" k1=\\"0\\" k2=\\"1\\" k3=\\"1\\" k4=\\"0\\" result=\\"litImage\\" />\\n <feDisplacementMap in=\\"SourceGraphic\\" in2=\\"softMap\\" scale=\\"200\\" xChannelSelector=\\"R\\" yChannelSelector=\\"G\\" />\\n </filter>\\n </svg>\\n\\n <!-- 登录卡片 --\x3e\\n <div\\n class=\\"glass-component login-card\\"\\n ref=\\"tiltCard\\"\\n @mousemove=\\"handleMouseMove\\"\\n @mouseleave=\\"handleMouseLeave\\"\\n >\\n <div class=\\"glass-effect\\"></div>\\n <div class=\\"glass-tint\\"></div>\\n <div class=\\"glass-shine\\"></div>\\n <div class=\\"glass-content\\">\\n <h2 class=\\"login-title\\">欢迎登录</h2>\\n <form class=\\"login-form\\">\\n <div class=\\"form-group\\">\\n <input type=\\"text\\" placeholder=\\"用户名\\" class=\\"glass-input\\">\\n </div>\\n <div class=\\"form-group\\">\\n <input type=\\"password\\" placeholder=\\"密码\\" class=\\"glass-input\\">\\n </div>\\n <button type=\\"submit\\" class=\\"glass-button\\">登录</button>\\n </form>\\n </div>\\n </div>\\n </div>\\n</template>\\n\\n<script>\\nexport default {\\n name: \'LiquidGlass\',\\n data () {\\n return {\\n // 可以添加需要的数据\\n }\\n },\\n methods: {\\n handleMouseMove (e) {\\n const card = this.$refs.tiltCard\\n const rect = card.getBoundingClientRect()\\n const x = e.clientX - rect.left\\n const y = e.clientY - rect.top\\n const centerX = rect.width / 2\\n const centerY = rect.height / 2\\n // 最大旋转角度\\n const maxTilt = 18\\n const rotateY = ((x - centerX) / centerX) * maxTilt\\n const rotateX = -((y - centerY) / centerY) * maxTilt\\n card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`\\n },\\n handleMouseLeave () {\\n const card = this.$refs.tiltCard\\n card.style.transform = \'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)\'\\n }\\n }\\n}\\n</script>\\n\\n<style lang=\\"scss\\" scoped>\\n.login-container {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.animated-background {\\n width: 100%;\\n height: 100%;\\n background-image: url(\'../../assets/macwallpaper.jpg\');\\n background-size: cover;\\n background-position: center;\\n background-repeat: no-repeat;\\n}\\n\\n.login-card {\\n width: 400px;\\n position: relative;\\n border-radius: 24px;\\n overflow: hidden;\\n box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);\\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);\\n cursor: pointer;\\n background: transparent;\\n}\\n\\n.glass-effect {\\n position: absolute;\\n inset: 0;\\n z-index: 0;\\n backdrop-filter: blur(5px);\\n filter: url(#glass-distortion);\\n isolation: isolate;\\n border-radius: 24px;\\n}\\n\\n.glass-tint {\\n position: absolute;\\n inset: 0;\\n z-index: 1;\\n background: rgba(0, 0, 0, 0.15);\\n border-radius: 24px;\\n}\\n\\n.glass-shine {\\n position: absolute;\\n inset: 0;\\n z-index: 2;\\n border: 1px solid rgba(255, 255, 255, 0.13);\\n border-radius: 24px;\\n box-shadow:\\n inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),\\n inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);\\n pointer-events: none;\\n}\\n\\n.glass-content {\\n position: relative;\\n z-index: 3;\\n padding: 2rem;\\n color: white;\\n}\\n\\n.login-title {\\n text-align: center;\\n color: #fff;\\n margin-bottom: 2rem;\\n font-size: 2rem;\\n font-weight: 600;\\n text-shadow: 0 1px 3px rgba(0,0,0,0.2);\\n}\\n\\n.form-group {\\n margin-bottom: 1.5rem;\\n}\\n\\n.glass-input {\\n width: 90%;\\n padding: 12px 20px;\\n border: none;\\n border-radius: 10px;\\n background: rgba(255, 255, 255, 0.1);\\n color: #fff;\\n font-size: 1rem;\\n backdrop-filter: blur(5px);\\n transition: all 0.3s ease;\\n\\n &::placeholder {\\n color: rgba(255, 255, 255, 0.7);\\n }\\n\\n &:focus {\\n outline: none;\\n background: rgba(255, 255, 255, 0.2);\\n box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);\\n }\\n}\\n\\n.glass-button {\\n width: 100%;\\n padding: 12px;\\n border: none;\\n border-radius: 10px;\\n background: rgba(255, 255, 255, 0.2);\\n color: #fff;\\n font-size: 1rem;\\n font-weight: 600;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n backdrop-filter: blur(5px);\\n position: relative;\\n overflow: hidden;\\n\\n &:hover {\\n background: rgba(255, 255, 255, 0.3);\\n transform: translateY(-2px);\\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\\n }\\n\\n &:active {\\n transform: translateY(0);\\n }\\n}\\n\\n// 添加点击波纹效果\\n.click-gradient {\\n position: absolute;\\n border-radius: 50%;\\n 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%);\\n transform: translate(-50%, -50%) scale(0);\\n opacity: 0;\\n pointer-events: none;\\n z-index: 4;\\n}\\n\\n.glass-component.clicked .click-gradient {\\n animation: gradient-ripple 0.6s ease-out;\\n}\\n\\n@keyframes gradient-ripple {\\n 0% {\\n transform: translate(-50%, -50%) scale(0);\\n opacity: 1;\\n }\\n 100% {\\n transform: translate(-50%, -50%) scale(3);\\n opacity: 0;\\n }\\n}\\n\\n.glass-component {\\n transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);\\n will-change: transform;\\n}\\n</style>\\n\\n
\\n液态玻璃效果是现代前端视觉的代表之一。只要理解其原理,分层实现、细致调优,任何人都能做出媲美 macOS、Win11 的高端玻璃UI。希望本教程能帮助你掌握这项技术,做出属于自己的酷炫界面!
","description":"Vue实现一个“液态玻璃”效果登录卡片 效果介绍\\n\\n液态玻璃(Liquid Glass)是一种极具现代感的UI视觉风格,常见于高端网站和操作系统界面。它通过多层叠加、模糊、光泽、滤镜等技术,模拟出玻璃的通透、折射和高光质感。苹果的这次系统设计更新,带火了这一设计效果,本教程将带你一步步实现一个带有3D灵动倾斜交互的液态玻璃登录卡片。\\n\\n实际效果:\\n\\n技术原理解析\\n1. 多层叠加\\n\\n液态玻璃效果的核心是多层视觉叠加:\\n\\n模糊层(blur):让背景内容变得虚化,产生玻璃的通透感。\\n色调层(tint):为玻璃加上一层淡淡的色彩,提升质感。\\n高光层(shine):模…","guid":"https://juejin.cn/post/7516306850715910182","author":"前端不端钱","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-06-16T00:42:03.064Z","media":[{"url":"https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/278f1066fd7d441aa0f88c1c3ae3f0ad~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5LiN56uv6ZKx:q75.awebp?rk3s=f64ab15b&x-expires=1750639323&x-signature=0p2g6GLNG379QwwiYiTcQZQeYck%3D","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["","前端","CSS","Vue.js"],"attachments":null,"extra":null,"language":null},{"title":"🚀🚀🚀恭喜 Rolldown 获得 JS 开源奖年度突破奖,2025 年 JS 开源奖典礼回顾!🎉🎉🎉","url":"https://juejin.cn/post/7515707680926810163","content":"昨天刷到了 JS Nation
举办的 2025 年 JS 开源奖典礼视频,发现我之前介绍的应用很多都入围了相关奖项!今天分享给还没看到的朋友!
下面是本次大会评定的奖项
\\n首先揭晓的是年度突破奖,Rolldown
获得了第一名,Rolldown
的实力是有目共睹的!
提名的其他库还有:
\\nSkip:由 Airbnb 推出的类 Server Components 的新框架,主打 Rust 编译、边缘部署、瞬时冷启动和多语言互操作
\\ntransformers.js:一个在浏览器和 Node.js 中运行的 Transformers 推理库,无需 Python,即可执行自然语言处理任务!
\\nThe Ember Polaris:Ember 框架的新篇章,致力于现代化 Ember 栈,包括 Vite 支持、标准化文件结构和模块化包管理。
\\nOxc:由我们的老朋友 VoidZero 开发的 Rust 编写的 JavaScript/TypeScript 解析器和工具链,旨在提供极致性能和强大的语法分析能力!
\\n最令人兴奋技术应用奖给了 TanStack Form ,TanStack 项目我之前浓墨重彩的介绍过两次,这里就不赘述了!
\\n其他提名的还有:
\\nts-blank-space:一个 TypeScript 的 ESLint 插件,专注于提升空格使用的一致性和可读性。
\\nBrisa:一个极简但强大的现代化 SSR 框架,基于 React 和 Vite 构建,定位于性能优先的 Web 应用开发。
\\nWasp:一个全栈 Web 应用框架,使用 DSL + React + Node.js + Prisma,简化业务应用的构建流程。
\\nFontaine:由 Vercel 开发的自动字体预加载工具,通过推测字体样式实现零 CLS(布局偏移)加载体验。
\\nH3:前天刚刚介绍的轻量级 HTTP 库,支持中间件、插件、事件处理,适用于构建 API 服务。
\\n最具生产力工具奖给了 Zod
,这个也是之前介绍过的老朋友!
其他被提名的内容还有:
\\nhappy-dom:一个适用于 Node.js 的轻量级 DOM 模拟器,用于在非浏览器环境中运行前端测试。
\\nStricli:Stricli 是一个轻量级、零依赖的框架,用于在 TypeScript 中构建复杂且功能丰富的命令行接口(CLI)。由 Bloomberg 开发,它旨在为开发者提供标准化的 CLI 开发体验,尤其适合需要类型安全和高效开发的大型组织。
\\nCrawlee:由 Apify 开发的强大爬虫库,支持 Puppeteer、Playwright 等驱动,专为现代网页抓取任务设计。
\\nFarm:Farm 是一个使用 Rust 编写的极速 Web 构建工具,兼容 Vite 插件生态。Farm 设计为极速、强大、一致的构建工具,旨在提供更好的 web 开发体验,是真正意义的下一代构建工具。
\\n其他的奖项感觉和国内的使用差异比较大,就不具体介绍了,感兴趣可以详细了解下!
\\n今天的分享就这些了,感谢大家的阅读,如果文章中存在错误的地方欢迎指正!
\\n