css实现横竖切换的logo照片墙无限无缝滚动效果代码
代码语言：html
所属分类：动画
代码描述：css实现横竖切换的logo照片墙无限无缝滚动效果代码，两边带有渐变效果，logo可上下左右无缝滚动。
代码标签： css 横竖 切换 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 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>
<div class="marquee marquee--reverse">
<div class="marquee__group">
<svg>
<use xlink:href="#hulu" />
</svg>
<svg>
<use xlink:href="#notion" />
</svg>
<svg>
<use xlink:href="#honda" />
</svg>
<svg>
<use xlink:href="#burger-king" />
</svg>
<svg>
<use xlink:href="#spotify" />
</svg>
<svg>
<use xlink:href="#aws" />
</svg>
<svg>
<use xlink:href="#jordan" />
</svg>
<svg>
<use xlink:href="#mcdonalds" />
</svg>
</div>
<div aria-hidden="true" class="marquee__group">
<svg>
<use xlink:href="#hulu" />
</svg>
<svg>
<use xlink:href="#notion" />
</svg>
<svg>
<use xlink:href="#honda" />
</svg>
<svg>
<use xlink:href="#burger-king" />
</svg>
<svg>
<use xlink:href="#spotify" />
</svg>
<svg>
<use xlink:href="#aws" />
</svg>
<svg>
<use xlink:href="#jordan" />
</svg>
<svg>
<use xlink:href="#mcdonalds" />
</svg>
</div>
</div>
</article>
<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="mcdonalds" viewBox="0 0 24 24">
<path d="M17.243 3.006c2.066 0 3.742 8.714 3.742 19.478H24c0-11.588-3.042-20.968-6.766-20.968-2.127 0-4.007 2.81-5.248 7.227-1.241-4.416-3.121-7.227-5.231-7.227C3.031 1.516 0 10.888 0 22.476h3.014c0-10.763 1.658-19.47 3.724-19.47 2.066 0 3.741 8.05 3.741 17.98h2.997c0-9.93 1.684-17.98 3.75-17.98Z" />
</symbol>
<symbol id="jordan" viewBox="0 0 24 24">
<path d="M13.55 2.194v-.075c0-.35.113-.663.338-.938.225-.275.512-.412.862-.412s.663.112.938.337.425.525.45.9c.025.375-.088.688-.338.938s-.55.375-.9.375l-.225.075.075.112-.075.413-.15 1.2c.05.05.075.1.075.15l-.15.75c-.05.1-.1.175-.15.225l-.075.3a22.59 22.59 0 01-.45 1.575v.15c-.05.25-.087.45-.112.6-.025.15-.113.4-.263.75-.1.2-.1.525 0 .975l.075.075c0 .15.063.325.188.525s.187.375.187.525c.05 1-.025 1.85-.225 2.55l.15.45c.6.3.775.625.525.975l.375.15c.6.3 1.025.562 1.275.787.25.225.5.463.75.713.2.05.35.125.45.225l.225.075c1.05.7 2.1 1.55 3.15 2.55l.3.225v.075l-.075.15.225.15h.075c.15.1.25.15.3.15h.075c.05 0 .1-.025.15-.075l.15-.075c.1-.1.2-.175.3-.225h.3c.05 0 .05.025 0 .075l-.3.15-.375.45h.525l.525.075c.15-.05.275-.1.375-.15l.375-.225c.15-.05.3 0 .45.15h.075c.05.05.025.125-.075.225l-.9.825c-.25.2-.475.325-.675.375l-.975.675c-.05.05-.1.05-.15 0l-.225-.3-.15-.3-.188-.263-.225-.3-.187-.225-.15-.187-.3-.225c-.1 0-.2-.025-.3-.075l-.975-.75c-.15 0-.325-.075-.525-.225-.75-.65-1.25-1.05-1.5-1.2l-.45-.3-.9-.15c-.3-.05-.7-.2-1.2-.45l-.6-.3c-.4-.2-.675-.3-.825-.3l-.3-.15c-.2-.05-.35-.1-.45-.15l-.15-.15c-.1 0-.2.025-.3.075l-1.5.75-1.875.825c-.5.4-.975.725-1.425.975l-.825.375-1.275.9c-.1.1-.2.1-.3 0l-.15.15c-.15.05-.25.075-.3.075l-.3.15v.15H3.2l-.15.225c-.1.2-.2.312-.3.337-.1.025-.162.063-.187.113a.434.434 0 01-.075.112l-.15.15-.225.15-.338-.037-.45.075-.3.075c-.25.05-.45.012-.6-.113-.15-.125-.275-.312-.375-.562-.1-.15-.05-.275.15-.375l.075-.075c.05-.05.125-.075.225-.075h.45l.6-.225.3-.075c0-.1.025-.175.075-.225.05-.05.125-.075.225-.075v-.075a.666.666 0 01-.075-.3c-.05-.1-.063-.175-.037-.225.025-.05.05-.075.07.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0