CSS实现复杂轮播效果，包括大小变化和非均匀间距，如何操作？

Question

请问这个css轮播动画怎么写？有什么思路吗？

试过用把5个图片围成一个圆旋转，但达不到图中大小变化且左右距离不一致的效果
如果能提供源码（有偿）就更好了

Answer 1

<template lang="pug">
.slide-page
  transition-group(name='slide')
    .item(v-for='item in items', :key='item.id', :class='{ active: item.active }')
      img(:src='`https://picsum.photos/500/500?random=${item.imgId}`')
      p {{ item.title }}
</template>

<script setup lang="ts">
const items = ref(
  Array.from({ length: 3 }, (_, i) => ({
    imgId: i,
    id: Math.random(),
    title: `标题${i}`,
    active: false,
  }))
)

items.value[1].active = true

setInterval(() => {
  items.value[1].active = false
  items.value[2].active = true
  const first = items.value.shift()
  first && items.value.push({ ...first, id: Math.random() })
}, 2000)
</script>

<style scoped lang="scss">
.slide-page {
  display: flex;
  margin: auto;
  height: 300px;
  width: fit-content;
  align-items: flex-end;
  > .item {
    width: 150px;
    margin: 20px;
    display: flex;
    flex-direction: column;

    &,
    &.slide-leave-active,
    &.slide-enter-active,
    & > img {
      transition: all 0.5s ease;
    }

    &.slide-leave-to,
    &.slide-enter-from {
      margin: 0;
      width: 0;
      scale: 0.8;
      opacity: 0;
      translate: -20% 20%;
    }
    &.slide-enter-from {
      translate: 20% 20%;
    }

    > img {
      border-radius: 20px;
      border: red solid;
      border-width: 0;
    }
    > p {
      color: grey;
      text-align: center;
    }
    &.active {
      width: 200px;
      > img {
        border-width: 5px;
      }
    }
  }
}
</style>