<template>
<div class="myLoadingStyle" :style="{ animation: 'fadeOutLine ' + fadeOutTime + 's both' }">
<div class="load_img">
<img class="jzxz1" src="@/assets/jzxz1.png" />
<img class="jzxz2" src="@/assets/jzxz2.png" />
</div>
</div>
</template>
<script>
export default {
name: 'MyLoding',
props: {
aniTime: {
type: Number,
default: 2, //动画时间
},
},
data() {
return {
fadeOutTime: 0,
}
},
mounted() {
this.fadeOutTime = Number(this.aniTime)
setTimeout(() => {
this.$emit('finishLoading')
}, this.aniTime * 1000)
},
}
</script>
<style lang="scss">
.myLoadingStyle {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($color: #000000, $alpha: 0.5);
z-index: 9999;
.load_img {
width: 20%;
height: 30%;
position: absolute;
left: 40%;
top: 35%;
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}
.jzxz1 {
animation: xz1 4s infinite linear;
}
.jzxz2 {
animation: xz2 5s infinite linear;
}
}
@keyframes xz1 {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes xz2 {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(-180deg);
}
to {
transform: rotate(-360deg);
}
}
@keyframes fadeOutLine {
0% {
// opacity: 1;
display: block;
}
99% {
// opacity: 0.1;
}
100% {
// opacity: 0;
display: none;
}
}
}
</style>
