加载库
24种CSS+SVG加载动画合集,开箱即用的Loading效果库这是一款加载动画集合效果,基于 CSS Keyframes + SVG + 少量原生 JS 技术实现,内置 24 种风格各异的 Loading 样式——涵盖旋转圆环、弹跳圆点、进度条、波纹、沙漏...
落叶飞舞
Canvas 粒子风吹飘落动效——可实时调参的树叶飞舞特效实现方案这是一款基于 JavaScript Canvas 实现的粒子流风吹漂浮动画效果。树叶在画面中随风飘动,每片叶子都有独立的运动轨迹,支持 2D 平面自旋和 3D 翻滚动画,配合湍流扰动,整体观感自...
弧形轮播
纯CSS 向内 3D 弯曲图片自动轮播组件 | 无需JS的沉浸式画廊组件这是一款纯CSS 3D环形自动轮播效果,仅用CSS实现,图片卡片沿弯曲弧形轨道排列,两侧自然透视收缩,中间聚焦突出,呈现出强烈的空间纵深感。难得的是全程不依赖JS驱动动画,代码量极少且注释详尽,...
手机演示
手机屏360度3D旋转演示动画,纯 CSS 实现手机隐私屏幕(防窥屏)模拟效果这是一款模拟三星 Galaxy S26 Ultra 隐私屏功能的交互效果,基于 CSS ::before 和 ::after 伪元素实现。核心玩法是:鼠标靠近手机时屏幕内容清晰可见,鼠标移开后视...
倾斜悬浮卡片
纯 CSS 实现 3D 倾斜卡片横向画廊这是一款基于纯 CSS 3D 变换实现的横向滚动卡片画廊。默认状态下所有卡片以统一的透视倾斜角度排列,像一排被推倒的多米诺牌,本身就已经很有空间纵深感。悬停时焦点卡片「站直」回正,虚线边框浮现,...
散落卡片
纯 CSS 实现 3D 名片飞散悬浮场景 + 灯箱预览这是一款纯 CSS 实现的 3D 悬浮名片展示效果。多张名片以随机角度散落在一个模拟木地板的三维空间中,带透视感的排列让整个场景有种「刚从桌上洒落」的真实质感。交互分三步走:初始状态名片自然飘散...
自定义下拉框
纯 CSS 文件夹堆叠3D扇形下拉选择效果这是一款文件夹堆叠下拉选择效果,基于纯CSS技术实现。通过重新设计原生的<select>选择器,将传统的下拉列表改造成了立体的文件夹堆叠形态。每个选项都以文件夹图标呈现,采用扇形排列,从上到下依...
流光
纯 CSS 全息故障文字动画效果+3D漂浮流光卡片这是一款全息故障文字动画效果,基于纯CSS技术实现。标题文字带有RGB色彩分离的故障艺术风格,字母边缘会闪现出青色和紫红色的重影,模拟老式电视信号干扰的视觉感。背景卡片则笼罩着一层流动的彩色光晕...
二进制时钟
three.js实现可拖拽的 3D 二进制时钟效果这是一款3D二进制时钟效果,基于Three.js+JavaScript技术实现。时间不是用常规数字显示,而是转换成二进制编码,通过亮起的青色方块来表示。整个时钟是个可以拖拽旋转的3D立体模型,放...
相册集
3D透视上下翻转卡片轮播效果,类似于相册集翻看效果这是一款翻转卡片画廊效果,基于CSS+JavaScript+HTML技术实现。卡片可以像翻书一样正反翻转,点击切换时会流畅地展示正反两面的不同图片内容。,通过左右箭头切换时会有翻转过渡动画,视觉...
吸睛文字
12 种 CSS 文字阴影特效集合,其中包含「火焰灼烧」、「故障艺术」两种动态文字这是一套文字视觉效果合集,基于CSS text-shadow属性实现。包含霓虹发光、3D立体、火焰灼烧(动态)、色差分离、像素风、凸版印刷、彩虹渐变、故障艺术(动态)、长投影、描边轮廓、全息光效...
美化表单
纯 CSS 实现:带立体不规则边框的两款卡片表单美化效果这是一款表单美化效果,提供两种实现方式:左侧采用CSS 3D变换营造深度阴影,右侧使用clip-path+filter属性实现类似效果。两个版本都呈现出悬浮卡片的视觉质感,让原本枯燥的表单变得有...