css实现横竖切换的logo照片墙无限无缝滚动效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现横竖切换的logo照片墙无限无缝滚动效果代码，两边带有渐变效果，logo可上下左右无缝滚动。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">



    <style>
        :root {
          --color-text: navy;
          --color-bg: papayawhip;
          --color-bg-accent: #ecdcc0;
          --size: clamp(10rem, 40vmin, 30rem);
          --gap: calc(var(--size) / 14);
          --duration: 60s;
          --scroll-start: calc(var(--gap) * -1);
          --scroll-end: calc(-100% - var(--gap) * 2);
        }
        
        @media (prefers-color-scheme: dark) {
          :root {
            --color-text: papayawhip;
            --color-bg: navy;
            --color-bg-accent: #2626a0;
          }
        }
        
        * {
          box-sizing: border-box;
        }
        
        body {
          display: grid;
          align-content: center;
          overflow: hidden;
          gap: var(--gap);
          width: 100%;
          min-height: 100vh;
          font-family: system-ui, sans-serif;
          font-size: 1rem;
          line-height: 1.5;
          color: var(--color-text);
          background-color: var(--color-bg);
        }
        
        .marquee {
          display: flex;
          flex-wrap: nowrap;
          overflow: hidden;
          gap: var(--gap);
          -webkit-mask-image: linear-gradient(
            var(--mask-direction, to right),
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)
          );
                  mask-image: linear-gradient(
            var(--mask-direction, 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;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-around;
          gap: var(--gap);
          min-width: 100%;
          -webkit-animation: scroll-x var(--duration) linear infinite;
                  animation: scroll-x var(--duration) linear infinite;
        }
        
        @media (prefers-reduced-motion: reduce) {
          .marquee__group {
            -webkit-animation-play-state: paused;
                    animation-play-state: paused;
          }
        }
        
        .marquee--vertical {
          --mask-direction: to bottom;
        }
        
        .marquee--vertical,
        .marquee--vertical .marquee__group {
          flex-direction: column;
        }
        
        .marquee--vertical .marquee__group {
          -webkit-animation-name: scroll-y;
                  animation-name: scroll-y;
        }
        
        .marquee--reverse .marquee__group {
          animation-direction: reverse;
          -webkit-animation-delay: -3s;
                  animation-delay: -3s;
        }
        
        @-webkit-keyframes scroll-x {
          from {
            transform: translateX(var(--scroll-start));
          }
          to {
            transform: translateX(var(--scroll-end));
          }
        }
        
        @keyframes scroll-x {
          from {
            transform: translateX(var(--scroll-start));
          }
          to {
            transform: translateX(var(--scroll-end));
          }
        }
        
        @-webkit-keyframes scroll-y {
          from {
            transform: translateY(var(--scroll-start));
          }
          to {
            transform: translateY(var(--scroll-end));
          }
        }
        
        @keyframes scroll-y {
          from {
            transform: translateY(var(--scroll-start));
          }
          to {
            transform: translateY(var(--scroll-end));
          }
        }
        
        /* Element styles */
        .marquee svg {
          display: grid;
          place-items: center;
          width: var(--size);
          fill: var(--color-text);
          background: var(--color-bg-accent);
          aspect-ratio: 16/9;
          padding: calc(var(--size) / 10);
          border-radius: 0.5rem;
        }
        
        .marquee--vertical svg {
          aspect-ratio: 1;
          width: calc(var(--size) / 1.5);
          padding: calc(var(--size) / 6);
        }
        
        /* Parent wrapper */
        .wrapper {
          display: flex;
          flex-direction: column;
          gap: var(--gap);
          margin: auto;
          max-width: 100vw;
        }
        
        .wrapper--vertical {
          flex-direction: row;
          height: 100vh;
        }
        
        /* Toggle direction button */
        .toggle {
          --size: 3rem;
          position: relative;
          position: fixed;
          top: 1rem;
          left: 1rem;
          width: var(--size);
          height: var(--size);
          font: inherit;
          text-align: center;
          cursor: pointer;
          outline: none;
          border: none;
          border-radius: 50%;
          color: inherit;
          background-color: var(--color-bg-accent);
          z-index: 1;
        }
        
        .toggle:focus-visible {
          box-shadow: 0 0 0 2px var(--color-text);
        }
        
        .toggle span {
          position: absolute;
          display: inline-block;
          top: 50%;
          left: calc(100% + 0.4em);
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
          white-space: nowrap;
          transform: translateY(-50%);
          -webkit-animation: fade 400ms 4s ease-out forwards;
                  animation: fade 400ms 4s ease-out forwards;
          pointer-events: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        
        .toggle svg {
          --size: 1.5rem;
          position: absolute;
          top: 50%;
          left: 50%;
          width: var(--size);
          height: var(--size);
          fill: currentcolor;
          transform: translate(-50%, -50%);
          transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        .toggle--vertical svg {
          transform: translate(-50%, -50%) rotate(-90deg);
        }
        
        @-webkit-keyframes fade {
          to {
            opacity: 0;
          }
        }
        
        @keyframes fade {
          to {
            opacity: 0;
          }
        }
    </style>



</head>

<body>
    <button class="toggle" id="direction-toggle">
  <span>Toggle scroll axis</span>
  <svg aria-hidden="true" viewBox="0 0 512 512" width="100" title="arrows-alt-h">
    <path d="M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z" />
  </svg>
</button>

    <article class="wrapper">
        <div class="marquee">
            <div class="marquee__group">
                <svg>
        <use xlink:href="#mcdonalds" />
      </svg>
                <svg>
        <use xlink:href="#jordan" />
      </svg>
                <svg>
        <use xlink:href="#aws" />
      </svg>
                <svg>
        <use xlink:href="#spotify" />
      </svg>
                <svg>
        <use xlink:href="#burger-king" />
      </svg>
                <svg>
        <use xlink:href="#honda" />
      </svg>
                <svg>
        <use xlink:href="#notion" />
      </svg>
                <svg>
        <use xlink:href="#hulu" />
      </svg>
            </div>

            <div aria-hidden="true" class="marquee__group">
                <svg>
        <use xlink:href="#mcdonalds" />
      </svg>
                <svg>
        <use xlink:href="#jordan" />
      </svg>
                <svg>
        <use xlink:href="#aws" />
      </svg>
                <svg>
        <use xlink:href="#spotify" />
      </svg>
                <svg>
        <use .........完整代码请登录后点击上方下载按钮下载查看