最近在研究[微笑]@keyframes动画，特别喜欢创建滚动效果和视差效果。比如实现一个简单的滚动动画，可以让元素平滑地

___利伟Lv1 2026-04-01 08:37:10

最近在研究@keyframes动画，特别喜欢创建滚动效果和视差效果。比如实现一个简单的滚动动画，可以让元素平滑地从上到下滑入视图：

@keyframes scrollIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

再比如视差效果，通过调整不同的层在页面滚动时的移动速度，营造出层次感：

@keyframes parallax {
  from {
    background-position: center center, center center, center center;
  }
  to {
    background-position: center calc(center + 5vh), center calc(center + 10vh), center calc(center + 15vh);
  }
}

这些效果简单易懂，又很实用，赶紧试试吧！

反馈