轮播图 - 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>

Answer 2

要创建一个如你所描述的复杂轮播效果，其中涉及到图片的大小变化和非均匀间距，单纯使用CSS可能会比较挑战，因为CSS在动画方面虽然有强大的功能，但对于动态改变布局尺寸和间距的支持较为有限。不过，你可以通过一些创意和技术手段来近似实现这一效果。

思路

1. 使用CSS动画控制图片的旋转和缩放：首先，使用CSS的@keyframes定义旋转和缩放的动画。
2. 动态调整元素间距：由于CSS难以直接实现非均匀间距，你可能需要使用JavaScript或者伪元素来模拟这种效果。
3. 考虑使用SVG或Canvas：对于更复杂的动态图形和动画，SVG或Canvas可能更加适合，因为它们提供了更丰富的图形和动画能力。

示例实现（基于CSS和JavaScript）

以下是一个简化的实现思路，使用CSS来控制基本的旋转和缩放，JavaScript来调整间距：

HTML 结构

<div class="carousel">
    <img src="image1.jpg" alt="Image 1" class="carousel-item">
    <img src="image2.jpg" alt="Image 2" class="carousel-item">
    <img src="image3.jpg" alt="Image 3" class="carousel-item">
    <img src="image4.jpg" alt="Image 4" class="carousel-item">
    <img src="image5.jpg" alt="Image 5" class="carousel-item">
</div>

CSS 样式

.carousel {
    position: relative;
    width: 300px; /* 容器宽度 */
    height: 300px; /* 容器高度 */
    margin: auto;
    overflow: hidden;
    border-radius: 50%;
}

.carousel-item {
    position: absolute;
    width: 100px; /* 初始宽度 */
    height: 100px; /* 初始高度 */
    transition: transform 0.5s ease;
    opacity: 0.5; /* 初始透明度 */
}

/* 动画 */
@keyframes rotateCarousel {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.carousel-item:nth-child(1) {
    top: 50px; left: 100px; /* 调整位置模拟非均匀间距 */
    animation: rotateCarousel 10s linear infinite;
}

/* 以此类推，为每个图片设置不同的位置、动画延时等 */

JavaScript 调整间距（简化示意）

实际项目中，你可能需要根据具体效果调整图片位置和大小，这里不详细展开JavaScript代码，因为涉及到复杂的计算和动态调整。

注意

• 上面的代码仅提供了基础框架和思路，你需要根据实际情况调整样式和动画。
• 如果图片数量和间距调整非常复杂，建议使用SVG或Canvas来绘制和控制。
• 动画性能和兼容性也需要考虑，确保在各种设备和浏览器上都能良好运行。

由于具体实现复杂且高度定制化，很难直接提供完整的“源码”。希望上述思路和建议能帮助你开始构建你的轮播效果。如果需要进一步的帮助或定制化开发，考虑咨询专业的Web开发者或设计师。