CSS实现复杂轮播效果，包括大小变化和非均匀间距，如何操作？-灵析社区
MaxClick请问这个css轮播动画怎么写？有什么思路吗？  试过用把5个图片围成一个圆旋转，但达不到图中大小变化且左右距离不一致的效果 如果能提供源码（有偿）就更好了
我买了30万的鞋子https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240916/d8c11781ddd8163bfa0e9d353da90195.png
.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 }}
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)
.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;
}
}
}
}