这个效果是怎么做出来的
听起来要采样背景亮度、算对比度、切颜色，实际上 CSS 一行属性就解决了：给元素涂纯白，再加 mix-blend-mode: difference。difference 混合模式把元素和背后的像素逐点做差值运算——白底上的白色文字差值趋近于黑，黑底上的白色文字保持白，元素每移动一像素，反色结果都在实时重算，天然就是连续过渡，不需要任何 JavaScript 参与。滚动条划过深浅分界线时文字颜色丝滑翻转，这就是原视频里「不做硬切」的来源：不是做了过渡动画，而是混合模式根本没有「切」这个动作。
demo 里再加一层拖拽：pointer 事件把圆片拖过深浅条纹，两种颜色在一颗元素上反复切换，效果一目了然。条纹的滚动动画只动 background-position，零重排。
怎么用这条提示词
适合悬浮球、回到顶部按钮、跟随鼠标的自定义光标、悬浮侧边栏这类会横跨不同背景的常驻元素。发给 AI 时说明元素是什么、页面背景有哪些，它会处理层叠上下文。注意要交代「父级加 isolation: isolate」，否则混合模式会算到页面底色之外的层上，颜色不对。
想效果更好？试试这些
元素要用纯白（或纯黑）填充，彩色的 difference 结果会变色相——白变黑、红变青，彩色元素在混合模式下不可控。文字描边别加，混合模式下描边也参与差值会出毛边。Safari 上个别嵌套 transform 容器会建立独立合成层导致混合失效，遇到时把混合元素提升到滚动容器同级即可。深浅交替的中间灰背景上反色结果是中间灰，对比度会不足，设计背景时让明暗两端尽量拉开。