发廊灯滚动特效

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

<div class="loading"></div>

<script>
document.documentElement.style.setProperty('--loading-width', `${document.querySelector('.loading').offsetWidth + 60}px`);
</script>

<style>
.loading {
  --start-background-position: var(--loading-width);
  position: absolute;
  top: 0;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background-size: 8% 6px;
  background: repeating-linear-gradient(135deg, #47c0c0 0, #47c0c0 8%, #7fd3d3 8%, #7fd3d3 16%) repeat-x;
  animation: scrollAnimation 7s infinite linear;
}

@keyframes scrollAnimation {
  from {
    background-position: var(--start-background-position) 0;
  }
  to {
    background-position: 0 0;
  }
}
</style>