多彩水晶球近远景预览，CSS 自定义函数驱动的单色主题切换 + 滚动动画效果

    这是一款 CSS 自定义函数驱动的单色主题切换 + 滚动动画效果，基于 CSS 自定义函数与原生 JavaScript 技术实现。它借助 CSS 的 has () 函数关联单选按钮，可从白、红、绿、蓝这些基础 HTML 颜色里选主题色；还靠自定义的 --shader 函数，通过 color-mix () 搭配透明度参数，自动生成该主题下的各类明暗阴影，构建统一的单色配色方案；同时用 JS 监听滚动位置计算暗度占比，结合 scroll-timeline 进度控制常见动画，让界面中水晶球内部的景观（高山、流水、瀑布、树木、太阳等动画）随滚动呈现动态视觉变化，适用于主题切换类交互界面、创意风格展示页、水晶球、近远景预览等场景。