<template>
<div class="body">
<div class="auto">秒钟倒计时自动翻页</div>
<div class="switchCalendar">
<div class="boxItem">
<div class="boxs transformBox" :class="extraClasses2">
<div class="box box1">
<div class="outside">
<span>{{ number2 }}</span>
</div>
</div>
<div class="box box4">
<div class="outside">
<span>{{ nextNumber2 }}</span>
</div>
</div>
</div>
<div class="boxs staticBox">
<div class="box box2">
<div class="outside">
<span>{{ nextNumber2 }}</span>
</div>
</div>
<div class="box box3">
<div class="outside">
<span>{{ number2 }}</span>
</div>
</div>
</div>
</div>
<div class="boxItem">
<div class="boxs transformBox" :class="extraClasses">
<div class="box box1">
<div class="outside">
<span>{{ number }}</span>
</div>
</div>
<div class="box box4">
<div class="outside">
<span>{{ nextNumber }}</span>
</div>
</div>
</div>
<div class="boxs staticBox">
<div class="box box2">
<div class="outside">
<span>{{ nextNumber }}</span>
</div>
</div>
<div class="box box3">
<div class="outside">
<span>{{ number }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="over">{{ word }}</div>
</div>
</template>
<script>
export default {
name: "switchCalendar",
data: function () {
return {
// number: "",
nextNumber: "",
number2: "",
nextNumber2: "",
extraClasses: "",
extraClasses2: "",
interval: "",
word: "",
};
},
created() {
this.number = 0;
this.nextNumber = 9;
this.number2 = 2;
this.nextNumber2 = 1;
this.extraClasses = "box-animation";
this.extraClasses2 = "box-animation";
},
mounted() {
clearInterval(this.interval);
this.interval = setInterval(() => {
if (this.number < 1) {
this.number = 9;
this.number2 = this.number2 - 1;
this.extraClasses2 = "";
} else {
this.number = this.number - 1;
this.extraClasses2 = "";
}
if (this.number === 0 && this.number2 === 0) {
clearInterval(this.interval);
this.extraClasses = "";
this.extraClasses2 = "";
this.word = "结束了🌹";
} else if (this.number === 0) {
this.nextNumber2 = this.nextNumber2 - 1;
this.extraClasses2 = "box-animation";
}
this.start();
}, 1000);
},
methods: {
start() {
if (this.number == 0) {
this.nextNumber = 9;
} else {
this.nextNumber = this.number - 1;
}
},
},
};
</script>
<style lang="less" scoped>
.body {
height: 100vh;
padding-top: 20px;
.auto {
font-size: 25px;
font-weight: 800;
text-align: center;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
margin-bottom: 20px;
}
.switchCalendar {
display: flex;
justify-content: space-between;
margin: 10px;
.boxItem {
position: relative;
width: 49%;
height: 300px;
.boxs {
position: absolute;
width: 100%;
height: 300px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
.box {
width: 100%;
height: 150px;
overflow: hidden;
color: white;
background: linear-gradient(to bottom, #1a60aa, #5794d9);
}
.box:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.box:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
.transformBox {
z-index: 2;
}
.staticBox {
z-index: 1;
}
.box-animation {
.box1 {
animation: box1 1s ease-in infinite;
}
.box4 {
animation: box4 1s ease-in infinite;
}
}
.outside {
// span-align: center;
text-align: center;
span {
line-height: 300px;
font-size: 100px !important;
}
}
.box1 {
transform-origin: bottom; //bottom:指定原点的纵坐标为bottom
-webkit-transform-origin: bottom;
transform: rotateX(0deg);
backface-visibility: hidden; //隐藏被旋转的 div 元素的背面
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
@keyframes box1 {
0% {
transform: rotateX(0deg);
}
10% {
transform: rotateX(0deg);
}
60% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(-90deg);
}
}
.box4 {
transform-origin: top; //top:指定原点的纵坐标为top
-webkit-transform-origin: top;
transform: rotateX(90deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
@keyframes box4 {
0% {
transform: rotateX(90deg);
}
60% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
.box3 {
.outside {
transform: translateY(-50%);
span {
transition: all 0.5;
}
}
}
.box4 {
.outside {
transform: translateY(-50%);
span {
transition: all 0.5;
}
}
}
}
}
.over {
width: 100%;
font-size: 35px;
font-weight: 800;
text-align: center;
background: linear-gradient(to right, rgb(255, 230, 0), rgb(206, 6, 66));
-webkit-background-clip: text;
color: transparent;
margin-top: 80px;
}
}
</style>
vue上下分页效果
最新推荐文章于 2024-07-17 17:28:22 发布