HTML、CSS 与 JavaScript 示例
浏览可在 Pixorla 在线编辑器中直接打开的 frontend Demo。
每个示例都包含 HTML、CSS 与 JavaScript，可一键 fork 到编辑器。用于学习 UI 组件、CSS 动效与 GSAP 动画模式，并在编辑器中分享你的作品。
渐变卡片
动态渐变描边卡片效果。
查看示例 →GSAP 时间线
文字分段揭示动画。
查看示例 →玻璃按钮
磨砂玻璃风格 UI 组件。
查看示例 →Flexbox 网格
新手友好的布局练习。
查看示例 →宇宙风落地页
深色主题落地页 Hero 区块。
查看示例 →悬停翻转
鼠标悬停时的 3D 卡片翻转。
查看示例 →玻璃质感 UI 卡片
暗色玻璃卡片与 CTA 按钮，适合 Hero 区 UI 组件演示。
查看示例 →墨水晕染 Hover
CSS 墨水扩散 hover 效果，适合强调型标题交互。
查看示例 →CSS 3D 旋转立方体
使用 transform 与 perspective 的 CSS 3D 立方体动画。
查看示例 →真实玻璃拟态面板
带模糊、描边与柔和阴影的分层玻璃面板。
查看示例 →聚焦背景模糊
输入聚焦时背景模糊，适合表单密集型界面。
查看示例 →3D 倾斜卡片
鼠标跟踪倾斜的产品风格卡片。
查看示例 →GSAP 滚动拆分文字
GSAP 分行滚动揭示的标题动效。
查看示例 →霓虹发光按钮
CSS 阴影与渐变的霓虹发光 CTA。
查看示例 →极光背景
Hero 区动态极光渐变背景。
查看示例 →GSAP 交错网格
GSAP stagger 时序的网格入场动画。
查看示例 →CSS 黏液变形
SVG 黏液 blob 变形，使用 CSS filter 实现。
查看示例 →视差星空
暗色布局中的多层视差星场。
查看示例 →GSAP 水平循环
GSAP 无缝水平 marquee 循环。
查看示例 →