支持收纳与弧形展开交互动画的毛玻璃质感文件夹相册(CSS+JS)

文件夹相册

支持收纳与弧形展开交互动画的毛玻璃质感文件夹相册(CSS+JS)

这是一款相册文件夹展开收拢交互动画效果,基于 React 与 Motion (Framer Motion) 技术实现。点击文件夹时,拍立得风格的照片会沿着弧形轨迹优雅地展开呈网格排列;再次点击时...

基于纯CSS OKLCH实现的动态玻璃拟态主题切换效果

毛玻璃UI效果

基于纯CSS OKLCH实现的动态玻璃拟态主题切换效果

这是一款动态弥散光感玻璃拟态卡片效果,基于 CSS变量、oklch() 相对颜色与 CSS 三角函数技术实现。无需一行 JS,只需修改单个色相数值即可通过数学运算自动演算出和谐的三配色体系,配合...

GSAP ScrollTrigger 视差滚动与 SVG 路径绘图特效 | 创意滚动交互效果,适合时间轴、项目展示等场景

路径动画

GSAP ScrollTrigger 视差滚动与 SVG 路径绘图特效 | 创意滚动交互效果,适合时间轴、项目展示等场景

这是一款滚动视差代码展台效果,基于GSAP (ScrollTrigger / SplitText) 与 SVG 路径描边技术实现。当用户向下滚动页面时,前台的毛玻璃卡片与背景绚丽的 SVG 渐变...

 Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画

液态气泡

Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画

这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交...

Canvas 情话表白多幕交互页面,情人告白网页专用!

爱情告白

Canvas 情话表白多幕交互页面,情人告白网页专用!

这是一款基于 CSS + Canvas 实现的浪漫告白互动效果。深红色背景上漂浮着大量粒子爱心,中央毛玻璃卡片承载着逐幕展开的情书内容,顶部还有一条进度条记录故事推进到哪一步——整体走的是奢华红...

波浪线媒体(音乐)播放卡片(CSS+JS)

音乐播放器

波浪线媒体(音乐)播放卡片(CSS+JS)

这是一款仿 Google 风格的音乐播放卡片效果,基于 CSS + JS 技术实现。进度条被替换成一段动感的波浪曲线,视觉上比普通直线更有活力,整张卡片以专辑封面作为背景,叠加毛玻璃质感的控制区...

超写实雨滴玻璃动态壁纸生成器(WebGL+CSS)|支持日历+本地实时天气

实时壁纸

超写实雨滴玻璃动态壁纸生成器(WebGL+CSS)|支持日历+本地实时天气

这是一款基于 WebGL + CSS Glassmorphism 技术实现的雨天玻璃模拟效果,雨滴的折射、流淌、聚合全部逼真还原,不是简单的动图,而是实时渲染的物理级视觉体验。背景支持自定义图片...

CSS 高级 Tabs 标签页组件:选项卡该有的样子!

标签切换

CSS 高级 Tabs 标签页组件:选项卡该有的样子!

这是一款精致的 Tabs 标签页切换效果,基于 CSS + JavaScript 技术实现,当前激活项以青紫色渐变胶囊背景高亮显示,切换时内容区域平滑过渡,配合深色毛玻璃风格整体质感相当克制且高级。

纯 CSS 实现的图文主题卡片无限循环自动滚动+悬停暂停交互效果

滚动自动轮播

纯 CSS 实现的图文主题卡片无限循环自动滚动+悬停暂停交互效果

这是一款基于纯CSS技术实现的卡片自动轮播效果,通过边缘渐隐遮罩营造出沉浸式的无限滚动体验,无需JavaScript即可实现自动滚动和交互暂停功能。界面的核心设计在于视觉边界处理:轮播容器的左右...

黑金配色高端 Tailwind CSS + GSAP 着陆页网页模板

黑金叶

黑金配色高端 Tailwind CSS + GSAP 着陆页网页模板

这是一款可复用的深色系着陆页模板,基于Tailwind CSS + GSAP滚动动画技术实现。整体采用黑色背景搭配金色点缀的配色方案,营造出高端奢华的视觉氛围,特别适合展示品牌形象和专业服务。模...

纯 CSS 打造的毛玻璃质感交互式图片文件夹预览组件

图片文件夹

纯 CSS 打造的毛玻璃质感交互式图片文件夹预览组件

这是一款毛玻璃质感交互文件夹效果,基于 CSS Glassmorphism(磨砂玻璃)与 Transform 变换动画技术实现。它通过 backdrop-filter 营造出半透明的容器质感,并...

纯 CSS 打造的现代化毛玻璃+流光边框+悬停高亮交互按钮

晶莹质感按钮

纯 CSS 打造的现代化毛玻璃+流光边框+悬停高亮交互按钮

这是一款基于 纯 CSS 技术实现的毛玻璃风格(Glassmorphism)按钮。它巧妙利用了浏览器的底层滤镜属性,将背景的色彩与按钮表面的半透明磨砂感融为一体,边框有微光略过,悬停高亮动效,是...