相片贴纸
基于SVG滤镜实现的手绘风线条贴纸相片装饰动画效果这是一款手绘风线条抖动(Boiling Effect)贴纸效果,基于 SVG 滤镜与 CSS 动画 技术实现。通过给图形边缘添加不规则的随机扰动,让静态的手绘 Emoji 和文字呈现出如经典定格...
路径动画
GSAP ScrollTrigger 视差滚动与 SVG 路径绘图特效 | 创意滚动交互效果,适合时间轴、项目展示等场景这是一款滚动视差代码展台效果,基于GSAP (ScrollTrigger / SplitText) 与 SVG 路径描边技术实现。当用户向下滚动页面时,前台的毛玻璃卡片与背景绚丽的 SVG 渐变...
模拟风力
HTML5 Canvas 物理阻尼风速滑块交互特效 | 网页拟真物理反馈微动效这是一款物理阻尼风力滑块效果,基于HTML5 Canvas与JavaScript技术实现。用户在拖拽滑块时,不仅能实时改变风速数值(MPH),还能体验到由物理循环算法模拟出的风阻、阵风与随机湍流...
梅颂
米骨色调+杂志编辑风格实现的房产中介专用 Tailwind CSS 响应式网站模板这套以杂志编辑风为灵感、纯手工打造的 HTML 响应式网站模板,面向精品房产中介、奢华房源代理及独立地产顾问,呈现出一种安静且克制的看房体验。整体采用温润的米骨色调搭配赤陶色点缀与发丝级细节线条...
噪点解码动画
Canvas 实现 Strings Terminal 字符串终端物理交互效果这是一款基于 Canvas + 原生 JavaScript 技术实现的字符串终端物理交互效果,初始状态显示灰色 ASCII 噪点网格,点击拖动线条会触发物理回弹动画,将噪点解码为发光琥珀色文字信...
红色丝绒背景
原生 JS 实现红色丝绒质感流动线帘(窗帘)背景效果这是一款基于原生 JavaScript 技术实现的红色丝绒质感流动线帘背景效果,通过 Verlet 物理引擎模拟数千根垂直线条的自然摆动,呈现出逼真的丝绒褶皱与光影流动感,视觉高级且富有层次感,...
相机光圈
呼吸快门,用 p5.js 模拟镜头光圈的律动感,适合于网站 Loading 动画等场景这是一款「呼吸快门」动态视觉效果,基于 p5.js 技术实现。灵感来自相机光圈的开合机制——叶片在收缩与展开之间循环,赋予画面一种均匀呼吸的节奏感。闭合时线条向中心聚拢成放射状,舒展时线条随旋转...
层级关系树
纯 CSS 评论回复锚点连接线布局效果这是一款评论回复锚点连接线效果,基于CSS Anchor Positioning技术实现。左侧的竖线能精准地将主帖与所有回复连接起来,无论回复内容有多长、有多少条,连接线都能自动延伸到合适的位置...
雪盖蚊子
GSAP 下雪背景+雪花逐渐覆盖于文字表面动画效果这是一款雪花飘落动画效果,飘落的雪花覆盖于 3D 文字之上,让文字的边缘线条堆砌出毛茸茸的质感,这款动画效果基于CSS+JavaScript技术实现,有种冬日窗花的意境。
数字时钟
基于 React 的“表中有表”矩阵动力学创意数字时钟这是一款极具工业艺术感的数字时钟动效,基于 React 与 CSS 变量控制技术实现。它将传统的数字显示逻辑彻底重构:每一个数字“像素”都是一个独立的模拟表盘,通过成百上千个指针的同步旋转与精...
动态曲线轴
纯 CSS 鼠标滚动驱动线条轨迹绘制动画特效,用CSS打造动态路径引导效果这是一款基于鼠标滚动或者滑动页面驱动的线条轨迹绘制动画效果,基于纯 CSS keyframes结合animation动画技术实现,随着页面滚动,红色节点会沿预设的曲线轨迹移动,同时同步绘制出对应...
苹果表盘
用 CSS+JS 模拟 Apple Watch极简光影表盘视觉特效这是一款极简风格的 Apple Watch 阴影表盘效果,基于CSS+JavaScript技术实现,通过几何线条与渐变阴影营造出立体空间感,视觉上仿佛一块金属面板在光线下自然折角。整体设计干净...