情人节爱心
2026情人节心形粒子动画:用物理模拟写一封情书这是一款情人节主题的动态粒子艺术效果,基于 Canvas + JS 矩阵运算库实现,用大量带旋转摆臂的圆形粒子单元动态组合成心形轮廓,每个粒子都在独立运动,整体却维持着心形的聚合态势,粒子时而聚...
人体运动动画
CSS火柴人行走动画:纯样式驱动的骨骼动画这是一款用纯 CSS 实现的火柴人行走循环动画,由多个圆角矩形拼接成人体骨骼结构,通过 CSS 关键帧动画驱动各关节旋转,模拟出自然的走路姿态,还支持行走、旋转两种模式切换,以及颜色和尺寸的实时调节。
切换过渡效果
多模式视图过渡切换效果:HTML 原生转场效果的新玩法这是一款基于 CSS View Transitions API 实现的图片切换效果,支持淡入淡出(Fade)、切片(Slice)、切片+骰子(Slice+Dice)三种过渡模式,可通过下拉菜单自...
标签切换
CSS 高级 Tabs 标签页组件:选项卡该有的样子!这是一款精致的 Tabs 标签页切换效果,基于 CSS + JavaScript 技术实现,当前激活项以青紫色渐变胶囊背景高亮显示,切换时内容区域平滑过渡,配合深色毛玻璃风格整体质感相当克制且高级。
雪崩色块标签
CSS 颜色雪崩:140+个命名颜色的胶囊标签,支持真实重力、碰撞和堆叠效果!这是一款物理模拟色块展示效果,基于 CSS + Matter.js 技术实现,将140多个CSS原生命名颜色以胶囊标签形式呈现,每个色块都有真实的重力、碰撞和堆叠效果,还支持"零重力"和"爆炸"...
多边形边框轮播
平行四边形裁剪轮播+点击展示遮罩层内容(CSS+JS):打破方框的图片展示方案这是一款异形裁剪轮播效果,基于 CSS clip-path + JavaScript 技术实现,图片以倾斜的平行四边形裁切呈现,配合深色渐变背景和点击触发的遮罩层交互,每张幻灯片可独立绑定覆盖内...
环形相册
纯 CSS 圆环形相册画廊:让你的照片集展示更有格调这是一款圆形旋转画廊效果,基于纯 CSS 技术实现,核心视觉是将多张图片以放射状排列成一个完整的圆环,中央突出展示点击后的图片放大预览效果,周围卡片式缩略图自然铺开,整体像一个旋转的胶片盘,既有...
手绘下划线
纯 SVG + CSS 实现的 9 种不同风格手绘下划线悬停动画效果这是一款手绘下划线悬停动画效果,基于CSS动画+SVG Symbols+极简JavaScript技术实现。鼠标悬停导航文字时,会出现手绘风格的下划线,带有轻微的不规则感和动态描绘过程,每次显示还...
圆环加载器
纯 CSS 轻量级几何变形加载Loading动画效果这是一款几何变形加载动画效果,基于纯CSS技术实现。小圆点会在螺旋、圆环、花瓣等多种几何图案间流畅变换,每种形态都有独特的视觉韵律。整个动画通过flexbox居中布局,使用vmin单位让尺寸智能...
自定义下拉框
纯 CSS 文件夹堆叠3D扇形下拉选择效果这是一款文件夹堆叠下拉选择效果,基于纯CSS技术实现。通过重新设计原生的<select>选择器,将传统的下拉列表改造成了立体的文件夹堆叠形态。每个选项都以文件夹图标呈现,采用扇形排列,从上到下依...
流光
纯 CSS 全息故障文字动画效果+3D漂浮流光卡片这是一款全息故障文字动画效果,基于纯CSS技术实现。标题文字带有RGB色彩分离的故障艺术风格,字母边缘会闪现出青色和紫红色的重影,模拟老式电视信号干扰的视觉感。背景卡片则笼罩着一层流动的彩色光晕...
层级关系树
纯 CSS 评论回复锚点连接线布局效果这是一款评论回复锚点连接线效果,基于CSS Anchor Positioning技术实现。左侧的竖线能精准地将主帖与所有回复连接起来,无论回复内容有多长、有多少条,连接线都能自动延伸到合适的位置...