从右往左的动画~
HTML代码：
<div class="wrapper-logo"> <div class="marquee"> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> </div> <div class="marquee"> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> </div> <div class="marquee"> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> </div> <div class="marquee"> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> <div class="marquee__group"> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> <div class="item-logo"> <img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg"> </div> </div> </div></div>xml7.5 KB© AHAP
CSS代码：
.wrapper-logo{ --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: calc(200px / 14); margin: auto; max-width: 100vw } .marquee { display: flex; overflow: hidden; -webkit-user-select: none; user-select: none; gap: var(--gap); -webkit-mask-image: linear-gradient(to right,#0000,#000 20%,#000 80%,#0000); mask-image: linear-gradient(to right,#0000,#000 20%,#000 80%,#0000)}.marquee__group { flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; gap: var(--gap);
