图片悬停
纯 CSS 图片悬停缩放圆角边框效果这是一款图片悬停缩放边框效果,基于CSS transform和transition技术实现。鼠标悬停时,图片会产生轻微的放大效果,同时边框样式也会发生变化,给人一种图片"呼吸"般的动态感受。适用...
logo滚动
GSAP 无缝 Logo 图片无限滚动展示效果这是一款品牌Logo轮播效果,基于GSAP动画库实现。多个品牌标志在页面中水平无限循环滚动,视觉上完全无缝衔接,鼠标悬停时自动暂停,移开后继续滚动,移动端支持触摸交互。传统的Logo墙要么是静态...
相册
纯 CSS 模糊背景相框画廊效果这是一款图片展示效果,基于CSS Mask遮罩技术实现。每张照片呈现出"照片叠加相框"的视觉层次,中心区域保持清晰锐利,周围自然过渡到模糊背景,营造出景深和立体感。鼠标悬停图片呈现缓慢拉近的过渡...
爬虫背景
纯 Javascript 实现的蜘蛛+虫子在页面随机出现与爬动背景动画,支持鼠标交互效果这是一款趣味性的网页互动效果,基于HTML+JavaScript技术实现。页面上随机分布着多只大蜘蛛以及小虫子,用户只需将鼠标移动到虫子上方,虫子就会自动掉落到页面底部,营造出一种"驱赶害虫"的...
滚动自动轮播
纯 CSS 实现的图文主题卡片无限循环自动滚动+悬停暂停交互效果这是一款基于纯CSS技术实现的卡片自动轮播效果,通过边缘渐隐遮罩营造出沉浸式的无限滚动体验,无需JavaScript即可实现自动滚动和交互暂停功能。界面的核心设计在于视觉边界处理:轮播容器的左右...
按钮加载特效
CSS 多场景分类卡片+按钮入场动画 - 动态交互式图标网格导航布局这是一款基于纯 CSS 实现的响应式图标卡片导航效果,专为多场景分类入口设计。整个界面采用深色系背景,8个圆角卡片呈4×2网格布局,每个卡片内包含线性图标和对应文字标签。核心亮点在于交互动效以及...
扫雷小游戏
赛博朋克风 HTML5 + GSAP 改良创新版扫雷小游戏源码 - 霓虹网格3D视觉特效这是一款赛博朋克风格的扫雷小游戏,基于 GSAP + SVG + CSS + HTML 技术实现。游戏采用《创:战纪》(Tron)电影的经典霓虹美学,将传统扫雷游戏板呈现为带有青色发光边框的3D...
图片文件夹
纯 CSS 打造的毛玻璃质感交互式图片文件夹预览组件这是一款毛玻璃质感交互文件夹效果,基于 CSS Glassmorphism(磨砂玻璃)与 Transform 变换动画技术实现。它通过 backdrop-filter 营造出半透明的容器质感,并...
转场动效
JS+SVG 驱动的 Halftone 半调网点创意揭幕动效这是一款极具视觉冲击力的创意动效,基于 JS 与 SVG 技术协同实现。它借鉴了经典报纸印刷中的“半调网点(Halftone)”工艺,通过动态控制成千上万个矢量圆点的尺寸缩放,实现从局部到整体的...
数字礼仪
基于 GSAP 打造的高端沉浸式交互名片这是一款极具质感的数字名片交互设计,基于 GSAP (GreenSock Animation Platform) 技术实现。它将传统的社交媒介转化为一种高度个性化的数字叙事,通过丝滑的入场动画与...
弧光魅力
纯 CSS 打造的沉浸式扇形卡片图片展示效果,支持悬停预览这是一款极具张力的扇形卡片展开效果,基于 纯 CSS(Transform / Rotate / Hover) 技术实现。它模仿了现实中手握扑克牌或照片集的自然姿态,通过精准的旋转角度位移,将一组...
图片堆叠
秩序之美:纯 CSS 打造的响应式交互头像堆叠布局效果这是一款智能响应式头像堆叠(Avatar Stack)交互效果,基于纯 CSS 技术实现。它将传统的成员列表(头像展示列表)转化为一种极具秩序感的“手风琴”式布局,利用负边距和层级管理,让多个头...