滚动驱动 3D 立方体旋转艺术展厅卡片轮播交互动效(CSS+JS)

3D数字展厅

滚动驱动 3D 立方体旋转艺术展厅卡片轮播交互动效(CSS+JS)

这是一款基于 CSS 3D+JavaScript 实现的滚动驱动 3D 立方体旋转艺术展示效果。它通过页面滚动触发立方体完成顺滑的 3D 旋转,六个展示面可承载不同艺术作品(图片或卡片)与配套内...

平行四边形裁剪轮播+点击展示遮罩层内容(CSS+JS):打破方框的图片展示方案

多边形边框轮播

平行四边形裁剪轮播+点击展示遮罩层内容(CSS+JS):打破方框的图片展示方案

这是一款异形裁剪轮播效果,基于 CSS clip-path + JavaScript 技术实现,图片以倾斜的平行四边形裁切呈现,配合深色渐变背景和点击触发的遮罩层交互,每张幻灯片可独立绑定覆盖内...

基于 WebGL 打造的极简 3D 像素风躲避障碍物 HTML 跑酷小游戏

跑酷小游戏

基于 WebGL 打造的极简 3D 像素风躲避障碍物 HTML 跑酷小游戏

这是一款轻量级的 3D 低多边形(Low-Poly)跑酷 HTML 小游戏,基于 Three.js 与 WebGL 技术构建。它不仅是一个简单的“跳一跳”程序,更像是《天天过马路》的极简网页版。...

用CSS的corner-shape打造多样化边框边角设计

多样式边角

用CSS的corner-shape打造多样化边框边角设计

这是一款 CSS 元素多样式边角效果,基于corner-shape属性实现,它给网页元素提供了丰富的边角形状选项,支持多种非传统角型设计,既有基础的圆形、方形,也有内凹、斜切这类个性样式,还能按...

three.js实现的 3D 大灰狼追赶小兔子跳跃 HTML 小游戏,跑的越远分越高!

追逐小游戏

three.js实现的 3D 大灰狼追赶小兔子跳跃 HTML 小游戏,跑的越远分越高!

这是一款基于Three.js技术实现的3D互动小游戏,玩家操控一只可爱的红色小兔,在不断滚动的森林场景中躲避黑色大狼和尖刺障碍,同时收集胡萝卜以提升分数。游戏节奏由慢到快,挑战性逐渐增强,兼具趣...

纯CSS带悬停效果的不规则多边形图片拼接到一起相册布局效果

相框

纯CSS带悬停效果的不规则多边形图片拼接到一起相册布局效果

​这是一款仅用CSS实现的响应式图片画廊,支持网格布局、不规则边框、悬停缩放及过渡动画,无需JavaScript,适用于作品集展示或相册浏览场景。

CSS悬停动态裁剪六种多边形图片边框卡片,并带有文字信息及操作按钮

悬停卡片

CSS悬停动态裁剪六种多边形图片边框卡片,并带有文字信息及操作按钮

这是一款基于CSS的 clip-path 动画等属性实现的卡片交互效果,悬停时图像裁剪为圆形、五边形等共六款多边形边框展开并滑出文字信息与操作按钮,适用于作品集或产品展示的渐进式披露场景。

JS+SVG可拖动连接点多边形效果,纯JS实现的文字拖拽效果源码下载

拖拽图形

JS+SVG可拖动连接点多边形效果,纯JS实现的文字拖拽效果源码下载

这是一款基于JavaScript生成SVG多边形实现的可拖动连接点效果,通过拖动点动态调整多边形形状,适用于交互式图形编辑场景。

CSS实现的7款不同风格斜角卡片边框效果|多边形卡片

多彩边框

CSS实现的7款不同风格斜角卡片边框效果|多边形卡片

这是一款斜角卡片边框效果,基于纯CSS技术实现,通过巧妙运用clip-path创建具有真实(半)透明边框的斜角形状。利用Sass mixin计算多边形点以形成独特的卡片轮廓,并且在需要时同样使用...

CSS实现旋转发光多边形光影交错动画效果

发光多边形

CSS实现旋转发光多边形光影交错动画效果

这是一款发光多边形效果,基于纯CSS技术实现,主要利用了CSS的animation以及clip-path等关键属性实现。通过多变图形的光晕以及旋转特效增强了网页元素的视觉吸引力。多边形周围环绕着...

CSS实现的4款极简风格Banner信息提示框

横幅提示框

CSS实现的4款极简风格Banner信息提示框

这是一款简化风格横幅设计效果,基于纯CSS技术实现。每个横幅项仅使用一个段落元素创建,遵循极简主义的设计原则,不添加各类仅为视觉效果的额外HTML元素,不通过多个部分组合创建形状,也不依赖于冗长...

HTML Canvas多边形旋涡动画效果,支持自定义多边形数量

旋转旋涡

HTML Canvas多边形旋涡动画效果,支持自定义多边形数量

这是一款基于HTML5 Canvas技术实现的多边形漩涡效果。通过Canvas绘图API,创建动态变化的多边形图形,这些图形围绕一个中心点旋转并逐渐向内收缩,形成漩涡般的视觉效果。此效果可以自定...