文字雨
HTML中基于Canvas+CSS实现可定制化《黑客帝国》式文字雨特效这是一款基于 JavaScript + Canvas 的动态数字矩阵模拟效果,模仿经典电影中的代码雨(Matrix Rain),支持自定义文字、速度及颜色,适用于科技感网站背景或创意视觉展示场景。
太空穿梭
基于WebGL与Canvas实现的星际迷航风格 3D 太空穿梭着色器这是一款受 SpaceX 星舰测试启发的 片段着色器(Fragment Shader) 特效,通过 GLSL 代码模拟宇宙飞船穿越星云或气态巨行星的科幻场景,适用于太空模拟、科幻游戏或 WebG...
图片切割
GSAP+splitting实现炫酷图片入场动画,图片被切割后,单个切割单元以旋转方式入场这是一款基于 Splitting.js + GSAP 技术实现的图像切割动效,将图片纵向拆分为多个单元并施加独立动画,适用于创意作品集、视觉冲击展示、图片入场或交互式媒体场景。
裁剪文字
响应式CSS文字裁剪路径动画,将图片至于文字背面!这是一款基于纯CSS技术实现的动态文字裁剪效果,将图片至于文字背面,利用 clip-path 实现响应式文本视觉变形,适配不同屏幕尺寸,适用于标题特效、创意文案展示等视觉冲击场景。
切斜旋转
CSS 六款斜切旋转伪元素悬停动态效果,适用于装饰性悬停动画、3D 视觉增强或创意 UI 设计场景。这是一款利用 ::before 和 ::after 伪元素实现的斜切旋转效果,基于纯CSS技术,通过独立操控伪元素的 skew、rotate 和 border-radius 属性实现动态变形,适...
倾斜文本
CSS向屏幕内倾斜的3D标题文本一款文本向屏幕内伸展的创意3D文本,基于CSS的transform及其他动画效果实现,页面加载后文本渐渐地呈现向屏幕里靠近的3D动画效果,适合于标题文本或其他号召性主题页面
卡片布局
纯CSS实现倾斜带标题的创意图文卡片布局,悬停时倾斜及图片复位这是一款基于伪元素双图层倾斜设计的图文卡片交互效果,基于纯CSS技术实现,悬停时伪元素复位并触发圆角与背景位移,适用于产品卡片或焦点图展示场景。
方块加载器
基于 splitting.js+GSAP 分割与重组方块实现创意Loading加载动画这是一款基于 Splitting.js 和 GSAP 技术实现的文字小方块拆解动画效果,通过CSS实现的多个小方块的分散重组创造加载过程,适用于品牌网站或创意页面过渡场景。
图片分割
CSS实现图片纵向分割成条,悬停时复原图片特效这是一款图片纵向分割与悬停复原动画效果,基于纯CSS的clip-path等关键属性实现,形象的模拟风暴下支离破碎的图片场景,适用于创意作品展示或动态视觉冲击场景。
图片切割
CSS悬停图片碎裂切割动画效果,模拟风暴般的破碎视觉这是一款基于 clip-path 和 CSS 动画实现的鼠标悬停图片切割分裂效果,模拟风暴般的破碎视觉,适用于创意作品展示或动态视觉冲击场景。
路径运动
纯CSS沿动态边框路径运动动画,无需SVG即可定义复杂路径这是一款基于CSS offset-path: border-box 实现的元素(小火箭)沿容器边框运动效果,无需SVG即可定义复杂路径,适用于提示动效或创意加载动画场景。
图文布局
CSS实现SVG不规则图文环绕效果,使svg图片自适应不规则图形或文字的边界这是一款基于CSS shape-outside 属性实现的SVG等图片悬停于section等区域一侧的上面布局效果,使svg图片自适应不规则图形边界,适用于创意排版或杂志风格网页设计。