HTML结构
- box 类是整个组件的容器。
- item-wrap 类是每个旋转卡片的包装器，每个都有一个内联样式–i，用于控制动画的延迟。
- item类是实际的卡片内容，包含一个图片。
<template><div class="box"><div class="item-wrap" style="--i: 0"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 1"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 2"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 3"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 4"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 5"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div></div>
</template>
CSS样式
- .item-wrap 使用display: contents;来移除包装器的边界框，只保留子元素的边界框。
- animation 属性定义了一个名为slide的关键帧动画，每个.item-wrap根据–i变量的不同而有不同的延迟。
- .item 类包含了一个transform属性，用于控制卡片的平移和缩放。
- transition 属性定义了.item变换的过渡效果。
<style scoped>
.box {display: flex;justify-content: center;align-items: center;position: relative;height: calc(100vh - 300px);background: rgba(31, 48, 53, 0.8);
}.image {width: 100%;height: 100%;
}@property --index {syntax: "<number>";initial-value: 0;inherits: false;
}@keyframes slide {0% {--index: 0;}100% {--index: 6;}
}.item-wrap {display: contents;animation: slide 12s calc(-2s * var(--i)) steps(6) infinite;
}.item {position: absolute;display: grid;place-content: center;width: 180px;height: 180px;border-radius: 8px;background-color: rgba(67, 141, 255, 0.4);border: 1px solid rgba(67, 141, 255, 0.8);color: #fff;font-size: 30px;counter-increment: num;transform: translate(var(--translate)) scale(var(--scale));transition: .5s transform;animation: slide 12s calc(-2s * var(--i)) infinite;
}.item-wrap:hover.item {animation-play-state: paused;
}@container style(--index: 0) {.item {transform: translate(0, 0) scale(1);z-index: 4;}
}@container style(--index: 1) {.item {transform: translate(120%, -30%) scale(0.9);z-index: 3;}
}@container style(--index: 2) {.item {transform: translate(100%, -70%) scale(0.8);z-index: 2;}
}@container style(--index: 3) {.item {transform: translate(0, -90%) scale(0.7);z-index: 1;}
}@container style(--index: 4) {.item {transform: translate(-100%, -70%) scale(0.8);z-index: 2;}
}@container style(--index: 5) {.item {transform: translate(-120%, -30%) scale(0.9);z-index: 3;}
}
</style>
