聖飢魔II

https://m.weibo.cn/status/4963210012656337

HTML

<div class="gallery-wrapper">
<div class="gallery-scroll">
    <img src="https://seaswallow.me/media/01cb1a9bd822ca071dc77ea7ac49ad1e83bd3401d0357f74b16e660a5f0c0cea.jpg" style="--angle:-2deg; --scale:1.05;">
    <img src="https://seaswallow.me/media/dfa2796b97f41eb7d3d4823685f0d957f9f2a0b54702e31739f9ccbb2b8a20c9.jpg" style="--angle:3deg;">
    <img src="https://seaswallow.me/media/1da44780b9a41065205d010b5aeedcd1f915497187b722dd55d218bbf9751bad.jpg" style="--angle:-1.5deg; --scale:0.98;">
    <img src="https://seaswallow.me/media/c8f3228b2410a3245c1980b9e2472aad584db57503b2e082781784acba84e2e7.jpg" style="--angle:2.5deg;">
    <img src="https://seaswallow.me/media/b52bcfe410702c9160bbd87783daa614a0b8db91339d0f5d0541986110a19036.jpg" style="--angle:-3deg;">
    <img src="https://seaswallow.me/media/0f240db858dee110145788fb74cfeb27283aabaa8fab39616ddc3c7c4acbcdd8.jpg" style="--angle:4deg;">
</div>
</div>

CSS

.gallery-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
  background: transparent;
}

.gallery-scroll {
  display: flex;
  gap: 2rem;
  animation: scrollLoop 35s linear infinite;
  width: max-content;
}

.gallery-scroll img {
  height: 500px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.4s ease;
  transform: rotate(calc(var(--angle, 0deg))) scale(calc(var(--scale, 1)));
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.gallery-scroll img:hover {
  transform: scale(1.2) rotate(0deg);
  z-index: 10;
}

@keyframes scrollLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  body#collection .gallery-scroll img {
    height: 500px;
  }
  body#collection .gallery-scroll {
    gap: 1rem;
  }