CSS3制作自动翻页效果
今天通过用css3样式来制作一个简易的数字自动翻页功能,可用于倒计时或日历翻页等场景。顺便来巩固一下css3动画属性。
这里用到的几个css3属性有:
-
transform-style属性
作用: transform-style指定嵌套元素是怎样在三维空间中呈现。
属性值:
flat(默认):将子元素平展到元素的平面中(所有子元素都在该元素的2d平面中展现)。
preserve-3d:其子元素将在3d空间中展现。
注意🐷: 使用此属性必须先使用 transform 属性. -
transform-origin属性
作用: ransform-Origin属性允许您更改转换元素的位置。 2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。
属性值:
top:指定原点的纵坐标为top
bottom:指定原点的纵坐标为bottom -
backface-visibility属性
作用: backface-visibility 属性定义当元素背面向屏幕时是否可见。
属性值:
hidden:背面是不可见的
visible:背面是可见的 -
transform属性
作用: Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
属性值:
rotateX:定义沿着 X 轴的 3D 旋转
translateY:定义转换,只是用 Y 轴的值。
此处只列出了每种属性所用到的属性值,更多属性值可前往菜鸟教程查看
<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里用CSS3制作自动翻页
发布评论