Scroll-Snap Rotator:「hello ___」滚动轮播

一个经典的滚动轮播效果（出处见 CodePen，思路来自 @jh3yy）：左边 hello 钉住不动，右边一列名字竖向滚动并吸附到正中，居中那个放大变亮、其余缩小变暗——像不断切换的 hello, ___。原作用 GSAP ScrollTrigger(pin + scrub)做高亮，而这套效果的三块拼图全部是纯 CSS，无需任何 JS；其中高亮部分用到 View Timeline 页讲的 animation-timeline: view()（见 caniuse）。

1 · 三块拼图：把 GSAP 的职责拆给原生 CSS

原作把「钉住 + 吸附 + 跟随滚动高亮」都交给 GSAP，而这三件事各有一条纯 CSS 的对应写法：

2 · 现场效果

在下面的框里上下滚动（触摸板 / 滚轮 / 拖滚动条都行）。虚线是容器正中，名字滚到那条线上时被「点亮」，顶部读数会同步显示当前居中的词：

3 · 关键 CSS

.scroller {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.greet {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}
li { scroll-snap-align: center; }

@keyframes spotlight {
  0%, 100% { opacity: .18; scale: .8; }
  50%      { opacity: 1;   scale: 1;  }
}
li > span {
  transform-origin: left center;
  animation: spotlight linear both;
  animation-timeline: view();
}