弹性入场
GSAP弹性缓动动画文本入场特效这是一款结合 Splitting.js 和 GSAP 技术实现的甩动弹性文字逐个入场动效,通过弹性缓动(elastic easing)以及分割文字使单个文字的入场产生生动变形动画效果,适用于标题...
模拟时钟
响应式SVG模拟时钟这是一款基于SVG+少量CSS代码实现的动态模拟时钟,具有自适应屏幕尺寸的特性,指针通过JavaScript实时同步时间,适用于仪表盘、复古风格界面或需要时间展示的场景。
裁剪文字
响应式CSS文字裁剪路径动画,将图片至于文字背面!这是一款基于纯CSS技术实现的动态文字裁剪效果,将图片至于文字背面,利用 clip-path 实现响应式文本视觉变形,适配不同屏幕尺寸,适用于标题特效、创意文案展示等视觉冲击场景。
切斜旋转
CSS 六款斜切旋转伪元素悬停动态效果,适用于装饰性悬停动画、3D 视觉增强或创意 UI 设计场景。这是一款利用 ::before 和 ::after 伪元素实现的斜切旋转效果,基于纯CSS技术,通过独立操控伪元素的 skew、rotate 和 border-radius 属性实现动态变形,适...
层叠卡片
JavaScript 3D错位动态堆叠卡片效果这是一款层叠偏移卡片效果,基于CSS+JavaScript技术实现,卡片以错位堆叠布局排列,悬停时通过动态调整 z-index 和位置突出当前卡片,适用于相册、项目集或内容画廊等展示场景。
倾斜文本
CSS向屏幕内倾斜的3D标题文本一款文本向屏幕内伸展的创意3D文本,基于CSS的transform及其他动画效果实现,页面加载后文本渐渐地呈现向屏幕里靠近的3D动画效果,适合于标题文本或其他号召性主题页面
光标放大镜
简约jQuery放大镜自定义光标插件,适用于图像预览、细节展示等交互场景这是一款光标悬停放大效果,基于CSS+SVG技术实现,当鼠标移动时会在自定义光标周围形成圆形放大镜区域,将局部内容动态放大显示,适用于图像预览、细节展示等交互场景。
卡片布局
纯CSS实现倾斜带标题的创意图文卡片布局,悬停时倾斜及图片复位这是一款基于伪元素双图层倾斜设计的图文卡片交互效果,基于纯CSS技术实现,悬停时伪元素复位并触发圆角与背景位移,适用于产品卡片或焦点图展示场景。
图书封面
纯CSS仿真书封设计,精致带书签的响应式图书封面这是一款基于 writing-mode 和 CSS 3D 变换实现的书籍封面效果,模拟横向文字排列与书签细节,适用于电子书推广或图书作品展示场景。
悬停卡片
CSS悬停动态裁剪六种多边形图片边框卡片,并带有文字信息及操作按钮这是一款基于CSS的 clip-path 动画等属性实现的卡片交互效果,悬停时图像裁剪为圆形、五边形等共六款多边形边框展开并滑出文字信息与操作按钮,适用于作品集或产品展示的渐进式披露场景。
方块加载器
基于 splitting.js+GSAP 分割与重组方块实现创意Loading加载动画这是一款基于 Splitting.js 和 GSAP 技术实现的文字小方块拆解动画效果,通过CSS实现的多个小方块的分散重组创造加载过程,适用于品牌网站或创意页面过渡场景。
