、oklch 与 @property 彩虹动画实战)
【免费下载链接】neat-annotationsHand-drawn CSS annotations for inline content项目地址https://gitcode.com/gh_mirrors/ne/neat-annotations点击查看免费下载neat-annotations 是一个纯 CSS 实现的手绘风格网页注释库没有 JavaScript、没有构建步骤一个自包含的样式文件就能给文字加上手绘箭头和手写标签。读它的源码 neat-annotations.css就像上一节现代 CSS 入门课light-dark()让颜色自动适配明暗主题oklch()让人眼友好的色彩运算成为可能property更是解锁了 CSS 变量彩虹动画。本文带你从这些实战代码里快速学会这三样最常用的 CSS 新特性。认识 neat-annotations纯 CSS 的手绘注释neat-annotations 的用法简单到只有一行 HTML给要强调的文字加一个ann类再写上data-note属性箭头和标签就会自动出现。span classann ann-n ann-amber />它内置了 8 个方向ann-n、ann-e、ann-s……像指南针一样命名和 6 种颜色ann-amber、ann-rainbow等每个方向、每种颜色背后都是现代 CSS 新特性的经典用法。light-dark() 实战一行代码适配明暗双主题传统做法是用媒体查询prefers-color-scheme: dark重写一遍颜色繁琐还容易漏。light-dark(浅色值, 深色值)直接根据系统主题取值一处声明、自动切换。neat-annotations 里到处是这种写法。默认灰色的定义neat-annotations.css--ann-color: light-dark(#898584, #b8b8bd);浅色主题下箭头是#898584深色主题下自动换成更亮的#b8b8bd无需任何额外规则。六种内置颜色全部用它一行搞定neat-annotations.css.ann-blue { --ann-color: light-dark(#3b72c4, #78a9ef); } .ann-green { --ann-color: light-dark(#2f8f5b, #67c792); } .ann-rainbow { /* 下面讲 */ }小技巧light-dark()还能嵌套在自定义属性里。你想用任意颜色时直接在元素上写style--ann-color: light-dark(#111, #f5f5f7)就拥有了自适应的自定义配色。oklch 色彩空间让高亮色跟随文字颜色oklch()是一种感知均匀的颜色空间用亮度L、色彩度C、色相H三个直觉化的参数描述颜色比 RGB 更适合基于某个颜色派生另一个颜色的场景。neat-annotations 的高亮背景色就展示了两种玩法neat-annotations.css--ann-mark: light-dark( color-mix(in oklch, var(--ann-color) 10%, transparent), oklch(from var(--ann-color) l calc(c * 1.35) h / 24%) );color-mix(in oklch, ...)把文字颜色按 10% 混入透明色得到柔和的荧光笔底色。混入的通道指定oklch混合结果才自然不灰暗。oklch(from var(--ann-color) l calc(c * 1.35) h / 24%)from关键字从现有颜色中提取 L、C、H再调整——亮度沿用、色彩度提高 35%、色相不变、透明度 24%。深色主题下的高亮色就这样从文字颜色里长出来。.ann-amber还配了一段注释说明为什么琥珀色的高亮要用亮黄色#ffb000而不是文字本身的橙色——这正是感知色彩空间带来的调参直觉neat-annotations.css。property 彩虹动画让 CSS 变量真正动起来ann-rainbow是最出彩的效果箭头和标签的颜色沿着整个色轮缓缓流转。它的实现只用了三段代码却是 CSS 动画的新范式。第一步声明变量的类型neat-annotations.cssproperty --ann-rainbow-hue { syntax: angle; inherits: false; initial-value: 350deg; }没有property时CSS 变量只是文本替换浏览器不知道350deg到710deg之间的值应该怎样插值动画根本跑不起来。property告诉浏览器这个变量是角度于是插值、动画全部生效。第二步用变量驱动颜色neat-annotations.css.ann-rainbow { --ann-color: oklch(0.65 0.28 var(--ann-rainbow-hue, 350deg)); }这里把 oklch 的色相参数交给变量。色相是连续的角度转动它就能在色轮上平滑滑动——这是 RGB 变量做不到的。第三步关键帧只转色相外加无障碍保护neat-annotations.csskeyframes ann-rainbow-cycle { to { --ann-rainbow-hue: 710deg; } } media (prefers-reduced-motion: no-preference) { .ann-rainbow { animation: ann-rainbow-cycle 3s linear infinite; } }从 350deg 转到 710deg整整一圈动画无限循环3 秒一个周期。prefers-reduced-motion媒体查询则保证用户系统若开启了减弱动态效果动画自动关闭——细节见分晓。顺带收下的其他 CSS 新特性这个 160 多行的小文件还有不少值得偷师的地方mask 内联 SVG 数据 URI箭头不是图片文件而是用mask: var(--_ann-arrow-mask)把一段 base64 风格的 SVG 路径蒙版成任意颜色neat-annotations.css换个变量就换支笔。forced-colors: activeWindows 高对比度模式下的兜底规则把箭头换成系统CanvasText颜色neat-annotations.css。属性选择器控制显隐.ann:not([data-note])让没有标签的纯高亮写法成立纯 CSS 就能做条件渲染。完整功能清单与自定义变量说明见 README.md。动手试试3 步跑起来获取源码git clone https://gitcode.com/gh_mirrors/ne/neat-annotations或直接用仓库里的 neat-annotations.css。在自己的 HTML 中引入link relstylesheet hrefneat-annotations.css。挑一段文字包上span classann ann-n ann-rainbow>赞分享【免费下载链接】neat-annotationsHand-drawn CSS annotations for inline content项目地址https://gitcode.com/gh_mirrors/ne/neat-annotations点击查看免费下载相关推荐Symfony Console 组件版本演进全解析从 CHANGELOG 看 8.x 属性驱动命令与经典组件架构Symfony Console 组件版本演进全解析从 CHANGELOG 看 8.x 属性驱动命令与经典组件架构 本篇文章以当前仓库的 CHANGELOG.mCLI开发工具PlaceholderAPI终极指南快速掌握Minecraft服务器动态变量系统PlaceholderAPI终极指南快速掌握Minecraft服务器动态变量系统 想要让你的Minecraft服务器聊天框显示玩家实时金币数量想在计分板上动后端Shiki 双主题Light/Dark Dual Themes渲染完全指南CSS 变量机制、defaultColor 与 light-dark() 实战Shiki 双主题Light/Dark Dual Themes渲染完全指南CSS 变量机制、defaultColor 与 light dark 实战 Sh前端开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/15 18:39:00 · 阅读 1.2k 从 neat-annotations 学现代 CSS 新特性：light-dark()、oklch 与 @property 彩虹动画实战
【免费下载链接】neat-annotationsHand-drawn CSS annotations for inline content项目地址https://gitcode.com/gh_mirrors/ne/neat-annotations点击查看免费下载neat-annotations 是一个纯 CSS 实现的手绘风格网页注释库没有 JavaScript、没有构建步骤一个自包含的样式文件就能给文字加上手绘箭头和手写标签。读它的源码 neat-annotations.css就像上一节现代 CSS 入门课light-dark()让颜色自动适配明暗主题oklch()让人眼友好的色彩运算成为可能property更是解锁了 CSS 变量彩虹动画。本文带你从这些实战代码里快速学会这三样最常用的 CSS 新特性。认识 neat-annotations纯 CSS 的手绘注释neat-annotations 的用法简单到只有一行 HTML给要强调的文字加一个ann类再写上data-note属性箭头和标签就会自动出现。span classann ann-n ann-amber />它内置了 8 个方向ann-n、ann-e、ann-s……像指南针一样命名和 6 种颜色ann-amber、ann-rainbow等每个方向、每种颜色背后都是现代 CSS 新特性的经典用法。light-dark() 实战一行代码适配明暗双主题传统做法是用媒体查询prefers-color-scheme: dark重写一遍颜色繁琐还容易漏。light-dark(浅色值, 深色值)直接根据系统主题取值一处声明、自动切换。neat-annotations 里到处是这种写法。默认灰色的定义neat-annotations.css--ann-color: light-dark(#898584, #b8b8bd);浅色主题下箭头是#898584深色主题下自动换成更亮的#b8b8bd无需任何额外规则。六种内置颜色全部用它一行搞定neat-annotations.css.ann-blue { --ann-color: light-dark(#3b72c4, #78a9ef); } .ann-green { --ann-color: light-dark(#2f8f5b, #67c792); } .ann-rainbow { /* 下面讲 */ }小技巧light-dark()还能嵌套在自定义属性里。你想用任意颜色时直接在元素上写style--ann-color: light-dark(#111, #f5f5f7)就拥有了自适应的自定义配色。oklch 色彩空间让高亮色跟随文字颜色oklch()是一种感知均匀的颜色空间用亮度L、色彩度C、色相H三个直觉化的参数描述颜色比 RGB 更适合基于某个颜色派生另一个颜色的场景。neat-annotations 的高亮背景色就展示了两种玩法neat-annotations.css--ann-mark: light-dark( color-mix(in oklch, var(--ann-color) 10%, transparent), oklch(from var(--ann-color) l calc(c * 1.35) h / 24%) );color-mix(in oklch, ...)把文字颜色按 10% 混入透明色得到柔和的荧光笔底色。混入的通道指定oklch混合结果才自然不灰暗。oklch(from var(--ann-color) l calc(c * 1.35) h / 24%)from关键字从现有颜色中提取 L、C、H再调整——亮度沿用、色彩度提高 35%、色相不变、透明度 24%。深色主题下的高亮色就这样从文字颜色里长出来。.ann-amber还配了一段注释说明为什么琥珀色的高亮要用亮黄色#ffb000而不是文字本身的橙色——这正是感知色彩空间带来的调参直觉neat-annotations.css。property 彩虹动画让 CSS 变量真正动起来ann-rainbow是最出彩的效果箭头和标签的颜色沿着整个色轮缓缓流转。它的实现只用了三段代码却是 CSS 动画的新范式。第一步声明变量的类型neat-annotations.cssproperty --ann-rainbow-hue { syntax: angle; inherits: false; initial-value: 350deg; }没有property时CSS 变量只是文本替换浏览器不知道350deg到710deg之间的值应该怎样插值动画根本跑不起来。property告诉浏览器这个变量是角度于是插值、动画全部生效。第二步用变量驱动颜色neat-annotations.css.ann-rainbow { --ann-color: oklch(0.65 0.28 var(--ann-rainbow-hue, 350deg)); }这里把 oklch 的色相参数交给变量。色相是连续的角度转动它就能在色轮上平滑滑动——这是 RGB 变量做不到的。第三步关键帧只转色相外加无障碍保护neat-annotations.csskeyframes ann-rainbow-cycle { to { --ann-rainbow-hue: 710deg; } } media (prefers-reduced-motion: no-preference) { .ann-rainbow { animation: ann-rainbow-cycle 3s linear infinite; } }从 350deg 转到 710deg整整一圈动画无限循环3 秒一个周期。prefers-reduced-motion媒体查询则保证用户系统若开启了减弱动态效果动画自动关闭——细节见分晓。顺带收下的其他 CSS 新特性这个 160 多行的小文件还有不少值得偷师的地方mask 内联 SVG 数据 URI箭头不是图片文件而是用mask: var(--_ann-arrow-mask)把一段 base64 风格的 SVG 路径蒙版成任意颜色neat-annotations.css换个变量就换支笔。forced-colors: activeWindows 高对比度模式下的兜底规则把箭头换成系统CanvasText颜色neat-annotations.css。属性选择器控制显隐.ann:not([data-note])让没有标签的纯高亮写法成立纯 CSS 就能做条件渲染。完整功能清单与自定义变量说明见 README.md。动手试试3 步跑起来获取源码git clone https://gitcode.com/gh_mirrors/ne/neat-annotations或直接用仓库里的 neat-annotations.css。在自己的 HTML 中引入link relstylesheet hrefneat-annotations.css。挑一段文字包上span classann ann-n ann-rainbow>赞分享【免费下载链接】neat-annotationsHand-drawn CSS annotations for inline content项目地址https://gitcode.com/gh_mirrors/ne/neat-annotations点击查看免费下载相关推荐Symfony Console 组件版本演进全解析从 CHANGELOG 看 8.x 属性驱动命令与经典组件架构Symfony Console 组件版本演进全解析从 CHANGELOG 看 8.x 属性驱动命令与经典组件架构 本篇文章以当前仓库的 CHANGELOG.mCLI开发工具PlaceholderAPI终极指南快速掌握Minecraft服务器动态变量系统PlaceholderAPI终极指南快速掌握Minecraft服务器动态变量系统 想要让你的Minecraft服务器聊天框显示玩家实时金币数量想在计分板上动后端Shiki 双主题Light/Dark Dual Themes渲染完全指南CSS 变量机制、defaultColor 与 light-dark() 实战Shiki 双主题Light/Dark Dual Themes渲染完全指南CSS 变量机制、defaultColor 与 light dark 实战 Sh前端开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考