纯css 轮播图片，鼠标移入暂停移除继续

核心

滚动：
animation: 动画名称 20s linear infinite normal;停止：
animation: 动画名称 20s linear infinite paused;

完整例子：

html:

<div class="carousel-wrapper"><div class="carousel"><div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div><div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div><div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div><div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div><div class="item"><img src="https://logo.clearbit.com/facebook.com" alt="Facebook"></div><div class="item"><img src="https://logo.clearbit.com/netflix.com" alt="Netflix"></div><div class="item"><img src="https://logo.clearbit.com/tesla.com" alt="Testla"></div><div class="item"><img src="https://logo.clearbit.com/nike.com" alt="Nike"></div><div class="item"><img src="https://logo.clearbit.com/adidas.com" alt="Addidas"></div><div class="item"><img src="https://logo.clearbit.com/coca-cola.com" alt="Coca-Cola"></div>
<!-- we need to add duplicate elements to make up the space - this needs to be magic numbered according to size of elements and width of container --><div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div><div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div><div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div><div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div></div>
</div>

css：

*{margin: 0;padding: 0;box-sizing: border-box;
}
:root{--bg-clr: #64748B;
}
body {min-height: 100svh;display: grid;place-content: center;background-color: var(--bg-clr);
}.carousel-wrapper {--width: 100px;--gap: 0;--num-items: 10;--ani-offset: calc(var(--width) * var(--num-items) * -1);--ani-speed: 10s;width: 400px;overflow: hidden;position: relative;
}
.carousel-wrapper::before,
.carousel-wrapper::after{content: '';position: absolute;width: 20%;height: 100%;z-index: 1;top: 0;
}
.carousel-wrapper::before{left: 0;background-image: linear-gradient(to right,var(--bg-clr) 0%,transparent 50%);
}
.carousel-wrapper::after{right: 0;background-image: linear-gradient(to left,var(--bg-clr) 0%,transparent 50%);
}.carousel {display: flex;align-items: center;animation: slide var(--ani-speed) linear infinite normal;
}
.carousel:hover {animation: slide var(--ani-speed) linear infinite paused;
}
.item{flex: 1 0 var(--width);text-align: center;padding:1rem;
}
.item:last-child{/*background: red;*/
}
.item > img{width: 100%;height: auto;object-fit: cover;
}@keyframes slide {100% {transform: translateX(var(--ani-offset));}
}