B SOUTH·BI 数据可视化前端
FRONTEND · TECH SHOWCASE

数据可视化，不止于图表

将玻璃拟态、流光动效、渐变主题与触控细节融入每一帧—— 在浏览器里打磨细腻、克制而有温度的可视化体验。

LIVE DEMO

加载效果实验台

双环旋转 · 渐变百分比 · 流光进度条，一次完整加载动画循环播放

细到每一帧的加载体验
进度由 transform: scaleX 驱动，跑在合成器线程上， 渲染再繁忙也不卡顿；光效独立于进度条，整条轨道恒宽扫过， 进度到达终点时淡出结束。
每轮完整动画会自动循环播放
KEY EFFECTS

核心效果

组件化打磨、主题统一、动效克制的六组能力

流光进度条
光效独立于填充层，恒定速度扫过整条轨道，进度刷新由合成器层完成，动画丝滑不阻塞。
Glassmorphism
玻璃拟态
backdrop-filter 毛玻璃质感与高亮描边，深浅两套主题下都保持通透、克制。
数据×可视化
渐变主题文字
深蓝到青绿的渐变文字与胶囊按钮，字号响应式缩放，移动端同样醒目。
双环旋转加载
conic-gradient 双色环 + 呼吸光晕，mask 镂空成细环，纯 CSS 实现、无额外资源。
悬浮玻璃卡片
悬浮卡片动效
卡片以轻缓曲线上下浮动，按下缩放反馈，交互层次自然清晰。
渐变分隔线
渐变细线 + 菱形标识做内容分区，区分度干净利落，兼顾视觉趣味。
双主题配色，一键切换 动效全部纯 CSS 实现 尊重系统「减弱动态效果」偏好 移动端安全区自适应