
UI 动效 003:Slot Machine,数字为什么要像滚轮一样翻过去
这期拆解 Slot Machine 数字滚轮动效:它适合金额、积分、抽奖结果等数值变化场景,核心实现是固定遮罩窗口、移动数字长条,并用先快后慢的节奏吸附到目标值。
Ajustando el formato del texto...
Contenido relacionado
Seleccionado de otros canales según similitud de contenido. Descubre nuevos creadores a seguir.
Imágenes y texto·Day 13 · Slider 滑块:范围可拖,精确另填
Slider 滑块用于在一个范围内拖动取值,适合音量、亮度、滤镜强度和价格区间等相对调节。本期 4 张图讲清 Slider 与 InputNumber / Progress Bar 的边界、4 种常见形态,以及使用口诀:范围可拖,精确另填。
UI/UX 组件每日一讲
Imágenes y texto·Day 05 · Loading Spinner:等待时的视觉锚点
Loading Spinner 是进度未知时的等待指示器——只告诉用户「系统在处理」,不告诉剩余时长。本期 4 张图讲清 Spinner 的定义、与 Progress Bar / Skeleton Screen 的核心区别、4 种变体类型(Inline / Overlay / Section / Icon),以及最关键的使用判断:等待超过 3 秒换 Progress Bar,加载内容列表换 Skeleton Screen,全屏 Spinner 慎用。
UI/UX 组件每日一讲
Imágenes y texto·Day 06 · Progress Bar:从 0% 到 100%,进度可见才有掌控感
Progress Bar 是等待三件套的最后一块:只要进度可量化,就该用它而非 Spinner。本期 4 张图讲清进度条的定义、与 Spinner/Skeleton Screen 的对比、4 种变体(确定型/不确定型/圆形/分步),以及最关键的一句判断口诀:能量化 → Progress Bar,不能量化 → Spinner,加载内容 → Skeleton Screen。
UI/UX 组件每日一讲
Imágenes y texto·Day 12 · Switch 开关:两种状态,点了就生效
Switch 开关用于二选一状态,并在点击后立即生效。本期 4 张图讲清 Switch 与 Checkbox / Radio 的边界、4 种常见形态,以及使用口诀:二选一 + 立即生效,才是 Switch。
UI/UX 组件每日一讲
Imágenes y texto·Day 07 · Skeleton Screen:内容加载时的占位幽灵
Skeleton Screen 是 Loading Spinner 的进化版:Spinner 只说「在转」,骨架屏进一步告诉用户即将出现什么形状的内容。本期 4 张图讲清骨架屏的定义、与 Spinner/Progress Bar 的三兄弟对比、4 种常用模板(卡片/列表/文章/个人资料),以及最关键的判断口诀:能量化 → Progress Bar,不能量化 → Spinner,加载内容列表 → Skeleton Screen。
UI/UX 组件每日一讲
Artículo·六月前端创意精选:Glass Blob、WebGL 漫画与 GSAP 全家桶
精选 7 个 2026 年 6 月上半月值得拆解的前端创意 Demo:来自 Awwwards 的 Glass Blob AI 品牌站、可翻阅的 WebGL 漫画、机器人 3D 微交互、GSAP 动效教科书,以及 CodePen 上的 ScrollTrigger 批量动画和纯 CSS 沙堡艺术。每个 Demo 都附有技术栈、创意亮点和可复用思路。
前端创意 Demo 双周刊

Añade más opiniones o contexto en torno a este contenido.