Mobile versionGerade zahlend SPWEISE SUREN LOGOS LOGOS. Änderungen). Ich habe sie mit n-ten Kind (sogar) und N-ten Kind (ungerade) angewendet. Aber die Animation fühlt sich inkonsistent an-manchmal springt sie beim Neustart oder gilt nicht richtig für neue Kinder. Animations. class = "snippet-code-html Lang-html PrettyPrint-Override">
Code: Select all
Logo Slider
.logo-slider {
display: flex;
flex-direction: column;
gap: calc(var(--gap-2) * 17);
align-items: center;
overflow: hidden;
}
.logo-slider__track {
width: 100%;
height: 150px;
border-radius: calc(var(--border-radius-2) * 10);
display: flex;
background-color: var(--color-light-shadow-blue-20);
box-shadow: inset 0 15px 15px -12px var(--color-dark-primary-5), inset 0 -15px 15px -12px var(--color-dark-primary-5);
transition: all 0.4s linear;
overflow: hidden;
position: relative;
}
.logo-slider__track:hover {
box-shadow: inset 0 15px 10px -12px var(--color-light-primary-55), inset 0 -15px 10px -12px var(--color-light-primary-55);
}
.logo-slider__list {
display: flex;
align-items: center;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: normal;
user-select: none;
}
.logo-slider__track:hover .logo-slider__list {
animation-play-state: paused;
}
.logo-slider__list img {
opacity: 0.9;
transition: all 0.3s linear;
}
.logo-slider__list img:hover {
transform: scale(1.12, 1.12);
}
.logo-slider__track:nth-child(odd) {
justify-content: flex-end;
}
.logo-slider__track:nth-child(even) {
justify-content: flex-start;
}
.logo-slider__track:nth-child(odd) .logo-slider__list {
animation-name: move-left;
}
.logo-slider__track:nth-child(even) .logo-slider__list {
animation-name: move-right;
}
.logo-slider__list,
.logo-slider__list>* {
margin-right: 96px;
}
.logo-slider__list> :first-child {
margin-right: 0;
}
.logo-slider__track> :last-child {
margin-right: 0;
}
@keyframes move-left {
0% {
transform: translateX(0)
}
to {
transform: translateX(-100%)
}
}
@keyframes move-right {
0% {
transform: translateX(0)
}
to {
transform: translateX(100%)
}
}
:root {
--marquee-gap: 9 6 p x ; < b r / > } < b r / > & l t ; / s t y l e & g t ; < b r / > & l t ; / h e a d & g t ; < b r / > < b r / > & l t ; b o d y & g t ; < b r / > & l t ; d i v c l a s s = " l o g o - s l i d e r " & g t ; < b r / > & l t ; d i v c l a s s = " l o g o - s l i d e r _ _ t r a c k " & g t ; < b r / > & l t ; d i v c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 0 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 4 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 5 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 6 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 7 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 8 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 9 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 0 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 1 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 2 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 3 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 4 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 5 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 6 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 7 " & g t ; < b r / > & l t ; / d i v & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 0 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 4 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 5 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 6 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 7 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 8 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 9 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 0 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 1 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 2 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 3 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 4 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 5 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 6 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 7 " & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " l o g o - s l i d e r _ _ t r a c k " & g t ; < b r / > & l t ; d i v c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 8 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 9 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 0 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 1 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 2 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 3 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 4 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 5 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 6 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 7 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 8 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 9 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 0 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 1 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 2 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 3 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 4 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 5 " & g t ; < b r / > & l t ; / d i v & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 8 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 9 " & g t ; < b r / > & l t ; i m g c l a s s = " l o g o - s l i d e r _ _ l o g o " s r c = " h t t ps://i.pravatar.cc/150?img=20">
[img]https://i.pravatar.cc/150?img=21[/img]
[img]https://i.pravatar.cc/150?img=22[/img]
[img]https://i.pravatar.cc/150?img=23[/img]
[img]https://i.pravatar.cc/150?img=24[/img]
[img]https://i.pravatar.cc/150?img=25[/img]
[img]https://i.pravatar.cc/150?img=26[/img]
[img]https://i.pravatar.cc/150?img=27[/img]
[img]https://i.pravatar.cc/150?img=28[/img]
[img]https://i.pravatar.cc/150?img=29[/img]
[img]https://i.pravatar.cc/150?img=30[/img]
[img]https://i.pravatar.cc/150?img=31[/img]
[img]https://i.pravatar.cc/150?img=32[/img]
[img]https://i.pravatar.cc/150?img=33[/img]
[img]https://i.pravatar.cc/150?img=34[/img]
[img]https://i.pravatar.cc/150?img=35[/img]
[img]https://i.pravatar.cc/150?img=36[/img]
[img]https://i.pravatar.cc/150?img=37[/img]
[img]https://i.pravatar.cc/150?img=38[/img]
[img]https://i.pravatar.cc/150?img=39[/img]
[img]https://i.pravatar.cc/150?img=40[/img]
[img]https://i.pravatar.cc/150?img=41[/img]
[img]https://i.pravatar.cc/150?img=42[/img]
[img]https://i.pravatar.cc/150?img=43[/img]
[img]https://i.pravatar.cc/150?img=44[/img]
[img]https://i.pravatar.cc/150?img=45[/img]
[img]https://i.pravatar.cc/150?img=46[/img]
[img]https://i.pravatar.cc/150?img=47[/img]
[img]https://i.pravatar.cc/150?img=48[/img]
[img]https://i.pravatar.cc/150?img=49[/img]
[img]https://i.pravatar.cc/150?img=50[/img]
[img]https://i.pravatar.cc/150?img=51[/img]
[img]https://i.pravatar.cc/150?img=52[/img]
[img]https://i.pravatar.cc/150?img=53[/img]
[img]https://i.pravatar.cc/150?img=36[/img]
[img]https://i.pravatar.cc/150?img=37[/img]
[img]https://i.pravatar.cc/150?img=38[/img]
[img]https://i.pravatar.cc/150?img=39[/img]
[img]https://i.pravatar.cc/150?img=40[/img]
[img]https://i.pravatar.cc/150?img=41[/img]
[img]https://i.pravatar.cc/150?img=42[/img]
[img]https://i.pravatar.cc/150?img=43[/img]
[img]https://i.pravatar.cc/150?img=44[/img]
[img]https://i.pravatar.cc/150?img=45[/img]
[img]https://i.pravatar.cc/150?img=46[/img]
[img]https://i.pravatar.cc/150?img=47[/img]
[img]https://i.pravatar.cc/150?img=48[/img]
[img]https://i.pravatar.cc/150?img=49[/img]
[img]https://i.pravatar.cc/150?img=50[/img]
[img]https://i.pravatar.cc/150?img=51[/img]
[img]https://i.pravatar.cc/150?img=52[/img]
[img]https://i.pravatar.cc/150?img=53[/img]
