Snoop Blog

实现next官网滚动线条

 
  • 2023年 06月16日

实现next.js官网的滚动线条效果

原理是设置background-image 为 linear-gradient，然后设置background-repeat重复展示，最后是通过设置background-size 去控制展示的大小 看起来像一个个小点组成的虚线，最后是使用动画控制

 <div style={
  position: 'absolute',
  right: 0,
  top: 0,
  width: '1px',
  height: '0%',
  background: 'linear-gradient(180deg,rgba(0,0,0,calc(0.15 * 3)),rgba(0,0,0,calc(0.15 * 3)) 50%,transparent 0,transparent)',
  backgroundSize: '1px 5px',
  backgroundClip: 'border-box',
  backgroundRepeat: 'repeat',
  animation: 'intro_height__JfLZr 0.54s cubic-bezier(0.645,0.045,0.355,1) forwards',
  animationDelay: 'calc(.25s)',
  backgroundPositionX: '0px',
  backgroundPositionY: '0px',
  textAlign: 'center',
  WebkitMaskImage: 'linear-gradient(to top,#fff 50%,transparent)'
} />

// animation
@keyframes intro_height__JfLZr {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
    opacity: 0.6;
  }
}
搜索