体验链接: https://znasr.gitee.io/mywebsite
<template>
<div class="banner">
<Icon type="ios-arrow-dropleft" class="arrowicon left" @click="leftclick" />
<Icon type="ios-arrow-dropright" class="arrowicon right" @click="rightclick" />
<div class="carousel">
<div
class="card-container"
v-for="i in CARDS"
:key="i"
:style="{
'--active': i === active ? 1 : 0,
'--offset': (active - i) / 3,
'--abs-offset': Math.abs(active - i) / 3,
opacity: Math.abs(active - i) >= MAX_VISIBILITY ? '0' : '1',
display: Math.abs(active - i) > MAX_VISIBILITY ? 'none' : 'block'
}"
>
<div class="cards">
<h2>card{{ i }}</h2>
<div>3d相册展示</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
CARDS: 10,
MAX_VISIBILITY: 3,
active: 1
};
},
created() {
let timer = setInterval(() => {
this.rightclick();
if (this.active > this.CARDS) clearInterval(timer);
}, 2500);
},
mounted() {},
methods: {
rightclick() {
this.active++;
if (this.active > this.CARDS) this.active = this.CARDS;
},
leftclick() {
this.active--;
if (this.active <= 1) this.active = 1;
}
},
components: {}
};
</script>
<style lang="scss" scoped>
.banner {
height: 100%;
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
background: #fff6f6;
.arrowicon {
position: absolute;
font-size: 30px;
top: 30%;
z-index: 9999;
color: #000;
}
.left {
left: 20px;
}
.right {
right: 20px;
}
}
.carousel {
position: relative;
width: 200px;
height: 260px;
transform-style: preserve-3d;
perspective: 500px;
.card-container {
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(calc(var(--offset) * 50deg)) scaleY(calc(1 + var(--abs-offset) * -0.4))
translateZ(calc(var(--abs-offset) * -300px))
translateX(calc(var(--offset) / var(--abs-offset) * -50px));
filter: blur(calc(var(--abs-offset) * 10px));
transition: all 0.3s ease-out;
}
.cards {
width: 100%;
height: 100%;
padding: 20px;
background-color: hsl(280deg, 40%, calc(100% - var(--abs-offset) * 50%));
border-radius: 6px;
// color: $color-gray;
text-align: justify;
transition: all 0.3s ease-out;
}
}
</style>