无缝衔接滚动轮播图

最新推荐文章于 2024-09-17 11:42:54 发布

恶鬼鬼

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量66

点赞数 2

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/weixin_55555627/article/details/141260748

版权

<template>
  <div class="wrapper">
    <div class="marquee">
      <div class="marquee__group">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="marquee__group">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
    <div class="marquee marquee-right-to-left">
      <div class="marquee__group">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="marquee__group">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
    <div class="marquee">
      <div class="marquee__group">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="marquee__group">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </div>

  </template>


  <style scoped lang="scss">
  .wrapper {
    --logo-width: 200px;
    --logo-height: 100px;
    --gap: calc(var(--logo-width) / 14);
    --duration: 60s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
  
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: auto;
    max-width: 100vw;
  }

  .marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    mask-image: linear-gradient(
      to right,
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
  }

  .marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scrollLeft var(--duration) linear infinite;
  }

  .marquee-right-to-left .marquee__group {
    animation: scrollRight var(--duration) linear infinite;
  }

  .item {
    width: var(--logo-width);
    height: var(--logo-height);
    background-color: red;
    border-radius: 6px;
  }

  @keyframes scrollLeft {
    from {
      transform: translateX(var(--scroll-start));
    }
    to {
      transform: translateX(var(--scroll-end));
    }
  }

  @keyframes scrollRight {
    from {
      transform: translateX(var(--scroll-end));
    }
    to {
      transform: translateX(var(--scroll-start));
    }
  }
</style>