#React #CSS #前端 #组件库 #新动态
Ant Design 6.0 来了！

AI 摘要：Ant Design v6 正式发布，以技术升级和未来兼容性为核心，全面支持 React 18+，引入纯 CSS Variables 模式、全量组件语义化结构，并新增 Masonry、可拖拽 Drawer、模糊蒙版等实用功能。此次升级保持对 v5 的完全兼容，带来更轻盈的打包体积与更灵活的定制体验。Ant Design X 也同步发布 2.0，聚焦 AI 场景的 UI 体验，预示着生态的又一次跃进。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 版本背景与发布说明
• Ant Design 自开源以来积累超 96K Star、2K+ 贡献者，社区生态庞大。
• v6 聚焦技术优化与未来 React 版本兼容，标志进入新阶段。
• 与 v5 之间为平滑迁移，v5 进入一年维护周期。

2. 技术升级与核心变化
• React 版本提升：最低要求 React 18，推荐使用 React 19，移除旧版兼容逻辑。
• 启用 React Compiler：在构建产物中优化性能，开发者可自行选择是否开启。
• 纯 CSS Variables 样式架构：全面弃用 IE 兼容逻辑，样式实现零运行时（zeroRuntime）模式，支持实时多主题切换。
• 组件语义化结构：所有组件 DOM 结构优化，支持函数式类名配置 (classNames) 与内联样式 (styles)，提升定制能力与可维护性。
• 移除废弃 API：彻底移除 v4 遗留逻辑，统一 API 命名，同时兼容 v5 的使用方式。

3. 新组件与功能增强
• Masonry 瀑布流组件：优化图片展示与卡片排布体验。
• Tooltip 支持平移切换：多内容提示实现滑动过渡。
• InputNumber spinner 模式：交互式加减按钮布局更直观。
• Drawer 支持拖拽：用户可调整抽屉大小。
• 模糊蒙版背景：所有弹层默认使用模糊特效，可按需关闭。

4. 升级指南
• v6 可直接从 v5 升级，无需 codemod 或兼容包。
• 项目需运行在 React 18+ 环境。
• 不再支持 IE，建议替换废弃 API。

5. 未来计划
• 聚焦移动端交互体验与可访问性（Accessibility）增强。
• 跟进 React 新特性，持续优化性能。
• 持续推出新组件，拓展生态边界。

6. One More Thing —— Ant Design X 2.0
• 面向 AI 场景的组件库同步升级，提供更智能的交互能力。
• 新版本强化渲染性能与灵活性，是探索 AI 驱动界面的关键工具。
• 更多详情可参考 🎉 Ant Design X 2.0 正式发布了 🎉。

7. 致谢
• 官方感谢 2000+ 贡献者的支持与共创。
• 十年开源历程，秉持「因为你们的参与，开源才美好」的初心。

GitHub

🎉 Ant Design 6.0 来了！ 🎉 · Issue #55805 · ant-design/ant-design

English | 中文 引言 自开源以来，Ant Design 已收获 96.6K Star、累计 31.9K issue、20.7K PR、发布了 904 个 npm 版本，并有 2314 位贡献者 共同参与其中。这些数字不仅代表着社区的活跃度与支持，也见证了项目的不断进化与成熟。 正因为你们，Ant Design 才能不断成长，向下一站前行：《Plan about Ant Design...

#优质博文 #前端 #CSS #动画 #工程化 #规范 #course
Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

AI 摘要：本文介绍了通过将动画关键帧 (@keyframes) 设计为可重用的 Keyframes Tokens，来实现动画系统的标准化与可维护化。作者说明了动画重复定义与全局作用域冲突带来的问题，提出以集中式样式表、命名空间、可定制的 CSS 自定义属性（custom properties）和设计 tokens 的方式来统一所有动画。文中展示了 fade-in、slide-in、zoom、spin、pulse 等动画的动态实现，并讨论了动画叠加、组合 (animation-composition)、可访问性 (prefers-reduced-motion) 与实际项目实施策略。核心思想是：让动画像颜色、字号、间距一样成为可管理的系统资源。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 动画混乱的根源
• 各组件独立创建重复的 @keyframes，导致代码冗余。
• CSS keyframes 属于全局作用域，容易被后加载样式覆盖。
• 修改或统一动画需全局搜查，影响维护效率。

2. 统一的解决方案：Keyframes Tokens
• 将动画关键帧集中存放在共享样式表中，形成唯一数据源。
• 利用命名空间（如 kf- 前缀）避免命名冲突。
• 借助 CSS 自定义属性实现动态参数化，支持多场景适配。
• 使动画定义与其他 design tokens（颜色、间距等）协同管理。

3. 构建基础动画库
• Fade In：定义基础淡入动画并统一调用。
• Slide In：通过自定义属性 --kf-slide-from 控制入场方向。
• Zoom：用 --kf-zoom-from/to 实现双向缩放。
• Spin/Pulse：封装连续动画，可控制旋转幅度、脉冲强度。
• Bounce/Elastic：展示复杂缓动（easing）动画封装方法。

4. 动画组合与冲突处理
• 可将多种动画组合，如 fade+slide 或 zoom+pulse。
• 对同一属性冲突时使用 animation-composition: add; 合并动画效果。
• 适当使用动画时间错位（stagger）提升视觉节奏。
• 说明 transform 与单独变换 (translate/scale) 的执行顺序差异。

5. 无障碍与减弱动效（Reduced Motion）
• 利用 prefers-reduced-motion 提供无动画或柔和过渡版本。
• 对需要仍然变换属性的动画定义瞬时完成（instant-in）版本。
• 保留必要动效但平滑化运动，提升可访问性。

6. 实施策略与最佳实践
• 渐进引入：从常见动画（fade、slide）着手。
• 命名规范：统一前缀标识 token 动画。
• 文档化：在 token 文件添加注释说明用途与参数。
• 灵活性与简洁性：仅暴露必要自定义属性。
• 融入设计体系：将 keyframes tokens 视为 design language 的一部分。

author Amit

Smashing Magazine

Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to…

#优质博文 #前端 #调试技巧 #JavaScript #CSS #Chrome
断点是真的很重要。严肃学习！
Six Things I Bet You Didn't Know You Could Do With Chrome's Devtools, Part 1

AI 摘要：本文由 Rachel 撰写，灵感来自 TechBash 会议中 Mike Rapa 的讲座，介绍了 6 个鲜为人知的 Chrome DevTools 技巧。本篇是 Part 1，涵盖前三个内容：用 console.time() 和 console.timeEnd() 精准计时函数执行、利用 DOM Breakpoints 实时捕捉元素变化，并自动暂停脚本运行、以及用 monitor() 在控制台监听任意函数调用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 文章背景与启发来源
• 作者参加 TechBash 会议，受到 Mike Rapa 的 DevTools 演讲启发。
• 本文专注于 Chrome DevTools 的 3 个隐藏功能，Firefox 部分功能支持略有不同。
• 计划分上下两篇，本篇为 Part 1，介绍前三个功能。

2. 计时函数性能监控
• 介绍 console.time() 与 console.timeEnd() 的使用，可精确测量代码块执行耗时。
• 提及 console.timeLog() 用于中间打印时间进度。
• 举例说明结合 React Hook 使用场景，展示暂停与超时逻辑的时间追踪方案。
• 来源：Mike Rapa 的演讲及 Github 仓库。
• 支持情况：原生 JS 特性，各浏览器均可使用。

3. 通过 DOM Breakpoints 检测元素变化
• 介绍如何在 Chrome Elements 面板中为任何 DOM 元素设置 "Break on" 断点。
• 当该元素属性、子树或节点被修改时，自动暂停脚本执行。
• 可快速定位导致页面 UI 异常的脚本。
• 提供 Stack Overflow 示例，展示实际操作方法。
• 支持情况：主流浏览器支持，Firefox 行为略有差异。

4. 使用 monitor() 监听任意函数调用
• 在控制台中可用 monitor(functionName) 监控任意函数调用及其参数。
• 帮助调试第三方脚本或不易插入 console.log() 的代码。
• 示例：sum(1,2) 会在控制台输出调用信息。
• 来源：Google DevTools Utilities 文档。
• 支持情况：仅支持 Chrome。

5. 预告与后续主题
• 作者计划在 Part 2 中讨论剩余三项：可视化编辑网页（WYSIWYG）、记录与重放用户操作、按需限速网络请求。
• 鼓励读者关注后续更新、尝试在实际项目中运用这些技巧。

author Rachel Kaufman

Rachel Kaufman, developer

Six Things I Bet You Didn't Know You Could Do With Chrome's...

Hidden and not-so-hidden tools that will make your life easier.

#优质博文 #CSS #3d #前端 #JavaScript
How to Create 3D Images in CSS with the Layered Pattern

AI 摘要：本文介绍了如何通过 CSS 3D transform 与 “layered pattern（分层模式）” 创建栩栩如生的 3D 图片效果。作者从 HTML 结构设计、CSS 3D 场景设置、层间位移计算、亮度与饱和度调节到交互控制面板（含 JavaScript）完整展示了创建流程。文章强调了分层视觉的本质是在二维平面中利用透视与光影制造立体幻觉，并通过 perspective、translateZ()、filter 等技巧实现动态的 3D 效果。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 3D CSS 概念与分层模式简介
• 概述 CSS 3D 的发展历史，从 2009 年起被 W3C 规范化
• “layered pattern（分层模式）”通过多个图层叠加制造立体幻觉
• 提示需理解 CSS perspective 与坐标系 (x, y, z) 概念

2. HTML 结构设计
• 使用 <div class="scene"> 包裹整个 3D 场景
• 建立多层重复图像 (.layer) 并以自定义属性 --i 标识层级
• 通过 aria-hidden="true" 处理无障碍可访问性问题
• 提及未来可通过 sibling-index() 和 sibling-count() 优化层索引

3. CSS 构建 3D 场景
• 设置 .scene { perspective: 1000px } 以控制深度
• 启用 transform-style: preserve-3d 让所有层在三维空间可见
• 通过 --layers-count 和 --layer-offset 控制层数与间距
• 利用 translateZ(calc(var(--i) * var(--layer-offset))) 实现纵深位移
• 计算标准化变量 --n 以动态调节亮度与饱和度实现光影变化
• 使用 filter: brightness() 与 filter: saturate() 增强立体层次
• 布局上将 .layer 与 .layers 设为 position: absolute; inset: 0 覆盖叠加

4. 动画与交互控制
• 通过 @keyframes rotate3d 添加旋转动画模拟立体旋转
• 创建交互控件（input range 滑块与按钮）控制 perspective、层间距与旋转角度
• 使用 JavaScript 监听输入事件动态更新 CSS 自定义属性与图像内容
• 示例函数 updateRotation() 绑定 X/Y 旋转值，支持图片更换

5. 附加功能与扩展
• 控制面板提供图像切换与参数调节体验
• JS 实现与视觉绑定，删除原有动画以改为实时控制
• 结尾展示延伸案例 “3D CSS steak”，说明同一技术可应用于更复杂视觉模型

6. 小结与启示
• 3D CSS 的核心在于“二维模拟三维”的视觉幻象
• 有效结合 transform、perspective 与 filter 可获得高性能的 3D 效果
• 分层模式可扩展用于文字、图片、UI 元素等多种设计

author Sunkanmi Fafowora

#碎碎念 #AI #前端 #设计
感觉 gemini 3 pro 的设计确实好有意思哦，给了我不少灵感
还能 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 这么玩儿（）

要做一个无关紧要的官网，我给我们设计安利了 gemini 3 pro 说这个可以出原型，他试了一下一直在卧槽卧槽（直呼底层设计要失业）
（好吧大家一起失业吧x）

https://aistudio.google.com/apps
https://github.com/ZeroLu/awesome-gemini-ai

0:08

Media is too big

VIEW IN TELEGRAM

#codepen #前端 #CSS
Creepy Button

"这个按钮在监视你"。从 Jon Kantner 这款俏皮的按钮下面探出头来，你会发现一双卡通眼睛正在跟踪你的一举一动👀。

#Newsletter #前端 #周刊更新
周刊第 16 期！ 这周给网站加上了无需后端的搜索和友链页面，好用的。
但是因为还没想好用什么域名比较好，所以还是预览版（要不叫 blog.cosine.ren 得了）
计划在没有后端的情况下把网站功能完善，然后再逐步加上有后端的功能，这样没后端的也好部署，就像以前用 hexo 的体验一样。
FE Bits Vol.16｜Cloudflare 事故报告出炉，CSSWG 确认 Masonry 布局语法 grid-lanes

cos

FE Bits Vol.16｜Cloudflare 事故报告出炉，CSSWG 确认 Masonry 布局语法 grid-lanes | 周刊 | 余弦の博客

本期：Git 2.52 首次引入 Rust；Cloudflare 故障；Angular v21 聚焦 AI；CSS 进展：Masonry grid‑lanes、Chrome 144 锚点变换感知。

#优质博文 #css #前端 #纹理 #设计
网站： https://paulsmith.github.io/classic-mac-patterns/
介绍： Classic 8×8-pixel B&W Mac patterns

AI 摘要：介绍了由 Paul Smith 制作的 Classic Mac OS System 1 背景图案，这些极小尺寸的复古像素图案可通过 CSS background-repeat 实现无限平铺效果。尽管源自经典的 Mac OS 设计风格，但它们在现代网页中依然有独特的美感和实用价值。

#优质博文 #CSS #前端 #Chrome #新特性
Anchor Positioning is transform-aware in Chrome 144+

AI 摘要：文章介绍了 Chrome 144 对 CSS 锚点定位（Anchor Positioning）机制的改进：从这一版本起，锚点定位将基于元素的“变换后”边界框（transformed bounding box），而不是此前的“未变换”状态，这让拥有 CSS transform 的元素上浮层、提示框等组件能够准确定位。该更新遵循 CSS 工作组（CSSWG）的最新规范决议，修复了长期存在的视觉错位问题。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 功能更新背景
• Chrome 144 将 Anchor Positioning 改为对 transform 变换敏感（transform-aware）
• 之前版本锚点计算基于未变换的边界框，导致定位错误

2. 技术细节与实现变化
• 新行为参考 CSSWG 规范修订（见相关 issue 链接）
• 更新后 tooltip、浮层等会根据元素的变换后位置进行定位

3. 实例与视觉演示
• 作者通过两个锚点的对比演示了旧版与新版定位差异
• Chrome 144 截图中两个 tooltip 均能正确跟随 transform 后的锚点

author Bramus!

Bram.us

Anchor Positioning is transform-aware in Chrome 144+

Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho

#碎碎念
感觉我遇到的人都很给我情绪价值，同事会说修这么快牛逼，接的救火外包的时候会被说哇塞太强了超级前端，遇到的陌生人会说哇塞我看过你的博客 / GitHub 好眼熟，很强，学弟学妹会说学姐真好
有时候只要一点点肯定就会很开心
₍˄·‌༝·‌˄*₎◞ ‌‌

但是对象抑郁症的时候就不会这样，抑郁的时候会记得的都是那些不好的事情，那些好的瞬间都不记得了，流走的都很快，感觉就很悲伤，心疼每一个得抑郁症的。

好在现在相对来说好一些了。

#碎碎念 #折腾
救火救了一天……晚上才有空给这小破站新加了个友链页面
好吧，设计上没有沿用之前的主题，没准哪天看不顺眼了接着换样式呢。
https://space.cosine.ren/friends

#CSS #前端 #新特性 #tip

虽然发过那么多次 CSS 新特性的博文推荐，但是在项目中实际用上的没那么多，决定开个新 tag 记录一下平常真在项目里用上了的小 tip！

CSS scroll-state 用来渐进式的增强滚动容器底部的羽化遮罩时还是很好用的～

refs:
1. Adaptive Alerts (a CSS scroll-state Use Case)
2. CSS @container scroll-state 容器滚动查询
3. Chrome 133 Goodies

 /* https://github.com/parcel-bundler/lightningcss/issues/887 */
  .scroll-feather-mask {
    container-type: scroll-state;
  }
  @container scroll-state(scrollable: bottom) {
    .scroll-feather-mask::before {
      content: '';
      background: linear-gradient(to bottom, transparent 0%, var(--gradient-bg-start) 70%, var(--gradient-bg-start) 100%);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      display: block;
      height: 5rem;
    }
  }

#优质博文 #CSS #设计系统 #可访问性 #前端 #WCAG
Tooltip Components Should Not Exist

AI 摘要：文章主张 <Tooltip> （提示框）组件在设计系统中不应独立存在，因为它常被误用，导致可访问性和一致性问题。作者认为应通过更高层级的组件（如带有 title 属性的 <Button>、<IconButton>、<InfoIcon> 等）来统一提示行为。这种做法能确保键盘操作可达性、用户体验一致性，并减少错误使用的可能，是“限制创造力反而带来更好设计”的典型案例。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 问题背景：为什么 Tooltip 容易被误用
• Tooltip 在网页中常被视为简单组件，但其实现需兼顾可访问性（Accessibility）与交互性（Interactivity）。
• 很多设计系统提供 <Tooltip> 组件，却被开发者误用或滥用。
• 根因在于这是一个抽象层级过低的组件，不易强制正确实践。

2. 键盘交互问题（Keyboard Interactivity）
• 非交互元素（如纯图标或徽章）包裹 Tooltip，导致使用键盘导航的用户无法触发提示。
• 举例：Material UI 的 <Tooltip> 示例在非交互元素上无法聚焦。
• React Aria 提供更佳方案：不为非交互元素显示 Tooltip，并通过 <Focusable> 组件确保焦点可达。

3. 用户体验一致性（Least Surprise Principle）
• Tooltip 容易出现在不合适的位置，如句中词语或无法预测的界面处。
• 缺乏一致性会让用户预期混乱、有的图标无说明、有的却多余提示。
• 结论：Tooltip 使用应可预测且统一。

4. 替代方案与系统设计（Higher-level Pattern Components）
• 不提供通用 Tooltip，而是通过更高层级组件统一规则：
• <Button> 或 <Link> 增加可选 title 属性。
• <IconButton> 强制要求 title 属性，保证含义明确。
• <InfoIcon> 明确显示“更多信息”图标，内部控制提示逻辑。
• <InfoText> 组件强调文字说明，可聚焦且视觉可区分。
• 通过这些约束可提升一致性与可访问性。

5. “限制反而带来创造力”的思考
• 限制 Tooltip 的使用让团队重新思考信息展示方式。
• 空间不足时，应改进界面而非“藏信息”。
• 设计系统的目标：减少误用、提升用户体验。

author TkDodo

tkdodo.eu

Tooltip Components Should Not Exist

A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences.

#前端 #react #新动态
React 2025 年现状调查：React 生态系统年度调查又开始了。提交截止日期为 11 月 25 日，也就是下周二。感兴趣的可以在这里查看 2024 年的调查结果

这种调查的填写过程中其实能学到不少东西。类似之前的 JS / CSS 的年度调查

State of React 2025

Take the State of React survey

#优质博文 #工作经验 #编程思维
谈谈工作中的犯错 | CatCoding

AI 摘要：这篇文章以作者和同事在实际工作中犯下的错误为线索，从信息泄露、退款接口、并发错误到配置事故等多个案例，讲述了程序员在日常开发与运维中容易犯的典型错误。文章强调“错误是最好的学习机会”，并提出以防御式编程 (Defensive Programming)、完善测试机制和安全意识为核心的改进思路。最后，作者呼吁保持敬畏之心，用系统化思维减少人为失误对团队和公司造成的损失。

author 程序员的喵

CatCoding

谈谈工作中的犯错 | CatCoding

All about coding and writing

#优质博文 #AI #prompt #agents

How to write a great agents.md: Lessons from over 2,500 repositories

AI 摘要：本文分析了超过 2500 个公开仓库中的 agents.md 文件，归纳出优秀自定义代理（Custom Agent）的关键写法：让每个代理具备明确角色、具体命令、严格边界与真实示例。成功的代理不是“通用助手”，而是专职专家，如 @docs-agent 负责文档、 @test-agent 负责测试。掌握六个核心领域（命令、测试、项目结构、代码风格、Git 工作流、边界）即可写出高效 agent 文件。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 背景与概念
• GitHub 推出新特性：以 agents.md 文件定义自定义代理（Custom Agent），让 Copilot 从通用助手变成具备明确角色的团队成员。
• 每个代理文件定义 persona（角色设定）、技能栈 (tech stack)、可操作命令、代码风格、及禁止行为。

2. 从 2500+ 文件分析得到的经验
• 成功的 agents 明确任务（如 documentation、testing、security），而失败的往往太模糊。
• 要点总结：
• 早放命令：在文件开头就定义可执行命令（含参数/flag）。
• 示例优于解释：展示代码风格比写长篇说明更有效。
• 明确边界：清楚列出“能做”“需确认”“禁止”的操作。
• 标注技术栈：注明版本与依赖，如 “React 18 + TypeScript + Vite + Tailwind CSS”。
• 六大领域覆盖：commands、testing、project structure、code style、git workflow、boundaries。

3. 优秀 agents.md 示例解构 (@docs-agent)
• 文件结构：YAML frontmatter 描述 → 角色与任务 → 项目知识 → 可用命令 → 写作准则 → 三层边界（Always / Ask first / Never）
• 成功原因：具体 persona、可执行命令在前、展示项目知识、有实例代码、边界分层清晰。

4. 构建你的第一个 agent
• 建议从小而具体的任务开始，如编写函数文档、添加单元测试、修复 linter 报错。
• 组成要素：名称、描述、persona 定义。
• Copilot 可辅助生成初稿，用 IDE 编辑 .github/agents/test-agent.md 并微调。

5. 实用代理类型推荐（六类）

• @docs-agent：生成文档，读 src/ 写 docs/。
• @test-agent：编写测试，永不删除失败测试。
• @lint-agent：执行格式修复，仅限风格层面修改。
• @api-agent：搭建 API 接口，修改数据结构需批准。
• @dev-deploy-agent：仅部署到开发环境，操作需批准。
• @security-agent（隐含）：执行安全分析或代码扫描。

6. 模板与最佳实践
• Starter template 提供完整结构：frontmatter、persona、project knowledge、tools、standards、boundaries。
• 强调命名规范、风格示例与边界设置的重要性。

7. 结论与启示
• 优秀 agent ≠ 冗长 prompt，而是清晰角色手册 (operating manual)。
• 核心在于：明确 persona、具体命令、真实样例、明确定义边界。
• 通过迭代完善 agent，让 Copilot 团队协作更像真实开发团队。

author Matt Nigh

The GitHub Blog

How to write a great agents.md: Lessons from over 2,500 repositories

Learn how to write effective agents.md files for GitHub Copilot with practical tips, real examples, and templates from analyzing 2,500+ repositories.

#优质博文 #CSS #前端 #动画 #新特性
More CSS random() Learning Through Experiments

AI 摘要：这篇博文由 Chris Coyier 撰写，通过一系列小实验展示了 CSS random() 函数的潜力与趣味。作者用它生成旋转星空、滚动视差(parallax)星空及基于滚动的点阵动效，探索随机数与动画、滚动时间轴 (scroll-driven animation) 以及 steps() 函数的互动效果。虽然目前仅 Safari 技术预览版支持该功能，但文章提供了可视化演示和代码片段，展示了 random() 带来的新创意空间和未来样式系统的潜能。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 引言与 random() 函数现状
• 作者介绍 CSS random() 函数的出现与规范化
• 指出目前仅 Safari Technical Preview 支持
• 强调实验性质：探索随机性在视觉设计中的可玩性

2. 旋转星空背景（Rotating Star Field）
• 灵感来自游戏 BALL x PIT 的旋转星空视觉
• 通过一系列定位在中心的 <div> 构建星体容器
• 使用 random() 控制星距、高度与旋转角度实现随机布局
• 结合 CSS 动画让内外圈星星反向旋转，形成动态层次感
• 提供 Demo 示例

3. 滚动视差星空（Parallax Stars）
• 扩展星空概念，将运动与滚动事件绑定
• 随机分组不同星星移动速度（100px、200px、300px）制造深度感
• 利用 animation-timeline: scroll(root) 与 animation-composition: accumulate 控制滚动叠加动画
• 展示了如何通过原生 CSS 控制视觉差与滚动互动
• 提供 Demo 示例

4. 网格点水平线（Horizontal Rules of Gridded Dots）
• 探索 random() 与 steps() 的结合，用离散滚动帧创造“跳动式”动画
• 创建点阵 <div> 元素随机偏移，再在滚动中平滑对齐
• 使用 view-timeline 触发每个分隔条的独立动画范围
• 通过渐变色与对齐位置制造视觉满足的“入场”效果
• 提供 Demo 示例

5. 结语与对未来 CSS 的思考
• random() 带来动态纹理与自然随机性的设计潜力
• 讨论当前需大量 <div> 的实现代价，期望未来 CSS 原生支持“可样式化网格单元”
• 总结：CSS 的随机性为网页设计开辟更多创造性方向

author Chris Coyier

Frontendmasters

More CSS random() Learning Through Experiments

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

#碎碎念 #美食
昨天吃了一家湘赣木桶饭，在不起眼的一个拐角，老板娘超热情，热情到我们两个社恐 i 人有点不知所措的程度。
昨天不自量力的点了一份68的烤鱼，以为按照吃其他家烤鱼的经验来说，应该也不会很多，结果上来的时候我人傻了，配菜和料多的要溢出去了，老板娘还在为让我们等久了不停道歉送了罐王老吉，中间加了 n 次火，那是真热情。
饭也超好吃，特辣是真的辣，妲喵点了个特辣的鱼香肉丝，发现是真的爆炸辣（以前附近的店吃到的都是广东辣hhhh），江西的辣。于是决定之后的外卖都点他们家了。
然后今天中午点的土豆牛肉饭也是香迷糊了，现炒的热乎的家常菜外卖（离家就几百米）。
木桶饭，好！以前怎么没想到吃这个。