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

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

代码语言：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);
      .........完整代码请登录后点击上方下载按钮下载查看