|
|
|
|
@ -0,0 +1,533 @@
|
|
|
|
|
<!--新火相传，e路生花 抽奖页面-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="page">
|
|
|
|
|
<div class="container" ref="appRef">
|
|
|
|
|
<img class="img-logo" src="~@/assets/xhxcelsh/logo.png" alt="">
|
|
|
|
|
<img class="img-title" src="~@/assets/xhxcelsh/title.png" alt="">
|
|
|
|
|
|
|
|
|
|
<div class="avatars" ref="avatarContainer">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="column" :data-key="column.key" v-for="(column, index) in avatars" :key="column.key" :ref="'column' + column.key" :data-ref="'column' + column.key">
|
|
|
|
|
<div v-for="(item,index1) in column.group" class="avatar" :key="column.key + '-' + item.id + '-' + index1">
|
|
|
|
|
<img :src="item.headimgurl" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="avatars" ref="avatarContainer">-->
|
|
|
|
|
<!-- <transition-group :css="true"-->
|
|
|
|
|
<!-- class="box"-->
|
|
|
|
|
<!-- name="list-complete"-->
|
|
|
|
|
<!-- tag="div">-->
|
|
|
|
|
<!-- <div v-for="(column, index) in avatars" :key="column.key" style="perspective: 600px;">-->
|
|
|
|
|
<!-- <div class="column" :data-key="column.key">-->
|
|
|
|
|
<!-- <div v-for="(item,index1) in column.group" class="avatar" :key="column.key + '-' + item.id + '-' + index1">-->
|
|
|
|
|
<!--<!– <div class="avatar-name" :style="{background: `rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`}">{{ item.id }}</div>–>-->
|
|
|
|
|
<!-- <img :src="item.headimgurl" alt="">-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- </transition-group>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
<div class="btn-end" v-show="!isResult && start">
|
|
|
|
|
<img src="~@/assets/xhxcelsh/btn-end.png" alt="" @click="end">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="start-container" v-show="!start && !isResult">
|
|
|
|
|
<div class="mask"></div>
|
|
|
|
|
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
|
|
|
|
<div class="start-container__title">
|
|
|
|
|
三等奖{{ product.total }}名
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<img class="start-container__shop" :src="product.image_file ? product.image_file.url : ''" alt="">
|
|
|
|
|
|
|
|
|
|
<div class="start-container__name">
|
|
|
|
|
奖品：{{ product.name }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="start-container__support">
|
|
|
|
|
赞助商 : {{ product.apply }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<img class="start-container__start" src="~@/assets/xhxcelsh/btn-start.png" alt="" @click="startDraw">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="end-container" v-show="!start && isResult">
|
|
|
|
|
<div class="mask"></div>
|
|
|
|
|
|
|
|
|
|
<div class="body">
|
|
|
|
|
<div class="close">
|
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
三等奖{{ product.total }}名
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="result-users">
|
|
|
|
|
<div class="result-users-item" v-for="i in 10">
|
|
|
|
|
<img class="result-users-item__avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIIMRcKFGZTZCqa5TZlKYogFOHrDQUe1iacWUJYcS3fjrwib2K5lG52Cd1y93UUd7Ynnvvw1tTYR2lw/132" alt="">
|
|
|
|
|
<div class="result-users-item__name">abc</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { throttle } from '@/utils'
|
|
|
|
|
import gsap from 'gsap'
|
|
|
|
|
import { index } from '@/api/activity/activityUser'
|
|
|
|
|
import drawMixin from '@/mixins/drawMixin'
|
|
|
|
|
import { draw } from "@/api/mdLotteryDraw";
|
|
|
|
|
import {
|
|
|
|
|
show
|
|
|
|
|
} from "@/api/activity/drawPrize";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
},
|
|
|
|
|
mixins: [drawMixin],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isResult: false,
|
|
|
|
|
start: false,
|
|
|
|
|
avatars: [],
|
|
|
|
|
timer: null,
|
|
|
|
|
product: {},
|
|
|
|
|
|
|
|
|
|
columnIndex: 0,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getProduct() {
|
|
|
|
|
const res = await show({
|
|
|
|
|
id: this.$route.params.id,
|
|
|
|
|
},false);
|
|
|
|
|
console.log(444,res)
|
|
|
|
|
this.product = res
|
|
|
|
|
},
|
|
|
|
|
async getUsers() {
|
|
|
|
|
try {
|
|
|
|
|
const res = (await index({
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 9999,
|
|
|
|
|
activity_list_id: 16
|
|
|
|
|
},false)).data
|
|
|
|
|
let users = [];
|
|
|
|
|
//19x6
|
|
|
|
|
if (res.length < (19*6*2)) {
|
|
|
|
|
let i = 0;
|
|
|
|
|
while (users.length < (19*6*2)) {
|
|
|
|
|
users.push(res[i])
|
|
|
|
|
i = ++i % res.length;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
users = res.data.slice(0,19*6*2);
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < users.length/6; i ++) {
|
|
|
|
|
let j = i*6
|
|
|
|
|
this.avatars.push({
|
|
|
|
|
key: i,
|
|
|
|
|
group: users.slice(j, j + 6)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.animate()
|
|
|
|
|
})
|
|
|
|
|
console.log(this.avatars)
|
|
|
|
|
} catch(err) {
|
|
|
|
|
console.error(err)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
animate() {
|
|
|
|
|
this.avatars.forEach(item => {
|
|
|
|
|
gsap.to(this.$refs[`column${item.key}`],{
|
|
|
|
|
translateX: (this.columnIndex >= 19 && item.key < 19) ? ((19 - (this.columnIndex - 19) - 1) * 100 + '%') : ((this.columnIndex + 1) * -100 + '%'),
|
|
|
|
|
// rotateY: -9 + ((item.key)+1) + 'deg',
|
|
|
|
|
// scale: item.key < 11 ? (0.82 + (item.key-1) * 0.02) : (1 - ((item.key-1) - 10) * 0.02)
|
|
|
|
|
onComplete: () => {
|
|
|
|
|
if(this.columnIndex === 19) {
|
|
|
|
|
for (let i = 0;i < 19;i++) {
|
|
|
|
|
gsap.set(this.$refs[`column${i}`],{
|
|
|
|
|
translateX: (i + 19) * 100 + '%',
|
|
|
|
|
duration: 0
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if(this.columnIndex === 0) {
|
|
|
|
|
for (let i = 19;i < 19*2;i++) {
|
|
|
|
|
gsap.set(this.$refs[`column${i}`],{
|
|
|
|
|
translateX: (i) * 100 + '%',
|
|
|
|
|
duration: 0
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
for(let i = 1;i <= 20;i++) {
|
|
|
|
|
gsap.to(this.$refs[`column${(this.columnIndex+i)%(19*2)}`],{
|
|
|
|
|
rotateY: -9 + ((i)+1) + 'deg',
|
|
|
|
|
scale: i < 10 ? (0.82 + i * 0.02) : (1 - (i - 10) * 0.02)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.columnIndex = (this.columnIndex+1) % (19*2)
|
|
|
|
|
},
|
|
|
|
|
startDraw: throttle(function () {
|
|
|
|
|
this.start = true
|
|
|
|
|
this.setTimer()
|
|
|
|
|
}),
|
|
|
|
|
async end() {
|
|
|
|
|
try {
|
|
|
|
|
const result = await draw({
|
|
|
|
|
id: this.$route.params.id,
|
|
|
|
|
});
|
|
|
|
|
console.log(result)
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
this.start = false
|
|
|
|
|
} catch (err) {
|
|
|
|
|
this.$message.warning({
|
|
|
|
|
message: "操作失败"
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
setTimer() {
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
|
this.animate()
|
|
|
|
|
},600)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
created() {
|
|
|
|
|
this.getProduct()
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getUsers()
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.page {
|
|
|
|
|
background: url("~@/assets/xhxcelsh/bkg.png") no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
.container {
|
|
|
|
|
width: 3584px;
|
|
|
|
|
height: 2048px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
transform-origin: left top;
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
@mixin img {
|
|
|
|
|
display: block;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-logo {
|
|
|
|
|
@include img;
|
|
|
|
|
height: 96px;
|
|
|
|
|
margin-top: 124px;
|
|
|
|
|
}
|
|
|
|
|
&-title {
|
|
|
|
|
@include img;
|
|
|
|
|
height: 143px;
|
|
|
|
|
margin-top: 104px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatars {
|
|
|
|
|
margin-top: 124px;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
.column {
|
|
|
|
|
height: 994px;
|
|
|
|
|
flex-basis: calc((100% / 19));
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.column + .column {
|
|
|
|
|
//margin-left: 45px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//.box {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
// padding: 0 20px;
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// perspective: 800px;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// top: 0;
|
|
|
|
|
//
|
|
|
|
|
// .column {
|
|
|
|
|
// transition: all .5s;
|
|
|
|
|
// .avatar + .avatar {
|
|
|
|
|
// margin-top: 45px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// @for $index from 1 through 19 {
|
|
|
|
|
// div:nth-child(#{$index}) > .column {
|
|
|
|
|
// @if $index <= 10 {
|
|
|
|
|
// transform: rotateY(calc(-9deg + #{$index - 1} * 1deg)) scale(calc(0.82 + #{($index - 1) * 0.02}));
|
|
|
|
|
// } @else {
|
|
|
|
|
// transform: rotateY(calc(-9deg + #{$index - 1} * 1deg)) scale(calc(1 - #{($index - 10) * 0.02}));
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
.avatar-name {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 0 6px 4px #00000022;
|
|
|
|
|
height: 115px;
|
|
|
|
|
width: 115px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
color: #fff;
|
|
|
|
|
line-height: 115px;
|
|
|
|
|
font-size: 34px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 0 6px 4px #00000022;
|
|
|
|
|
height: 115px;
|
|
|
|
|
width: 115px;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
background: #4dd9d5;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-end {
|
|
|
|
|
height: 250px;
|
|
|
|
|
margin-top: 55px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
animation: jello-horizontal 5.4s both infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.start-container {
|
|
|
|
|
z-index: 999;
|
|
|
|
|
position: fixed;
|
|
|
|
|
inset: 0 0 0 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.mask {
|
|
|
|
|
background: #00000088;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0 0 0 0;
|
|
|
|
|
transform: scale(20, 20);
|
|
|
|
|
}
|
|
|
|
|
&__title {
|
|
|
|
|
font-size: 54px;
|
|
|
|
|
letter-spacing: 11px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
height: 101px;
|
|
|
|
|
width: 577px;
|
|
|
|
|
line-height: 101px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: url("~@/assets/xhxcelsh/start-title-bkg.png") no-repeat;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
}
|
|
|
|
|
&__shop {
|
|
|
|
|
width: 684px;
|
|
|
|
|
height: 381px;
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
border: 5px solid #e6cb8f;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
margin-top: 158px;
|
|
|
|
|
}
|
|
|
|
|
&__name {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 90px;
|
|
|
|
|
}
|
|
|
|
|
&__support {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 27px;
|
|
|
|
|
}
|
|
|
|
|
&__start {
|
|
|
|
|
height: 250px;
|
|
|
|
|
margin-top: 162px;
|
|
|
|
|
animation: jello-horizontal 5.4s both infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.end-container {
|
|
|
|
|
z-index: 999;
|
|
|
|
|
position: fixed;
|
|
|
|
|
inset: 0 0 0 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.mask {
|
|
|
|
|
background: #00000088;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0 0 0 0;
|
|
|
|
|
transform: scale(20, 20);
|
|
|
|
|
}
|
|
|
|
|
.body {
|
|
|
|
|
width: 2334px;
|
|
|
|
|
height: 1425px;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: url("~@/assets/xhxcelsh/result-bkg.png") no-repeat #ffffff;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
border: 8px solid #e6cb8f;
|
|
|
|
|
|
|
|
|
|
.close {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 108px;
|
|
|
|
|
height: 108px;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
border: 2px #ffffff11 solid;
|
|
|
|
|
background-color: #348b8588;
|
|
|
|
|
transform: translateX(100%);
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: -30px;
|
|
|
|
|
|
|
|
|
|
& > i {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 56px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
height: 101px;
|
|
|
|
|
width: 557px;
|
|
|
|
|
line-height: 101px;
|
|
|
|
|
letter-spacing: 11px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: #1a543f;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 54px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: url("~@/assets/xhxcelsh/result-title.png") no-repeat;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
margin: 104px auto 0;
|
|
|
|
|
}
|
|
|
|
|
.result-users {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(5, 1fr);
|
|
|
|
|
grid-template-rows: repeat(2, 1fr);
|
|
|
|
|
grid-column-gap: 102px;
|
|
|
|
|
grid-row-gap: 77px;
|
|
|
|
|
margin-top: 102px;
|
|
|
|
|
padding: 0 215px;
|
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
|
|
|
|
|
&__avatar {
|
|
|
|
|
width: 292px;
|
|
|
|
|
height: 292px;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
}
|
|
|
|
|
&__name {
|
|
|
|
|
padding-top: 45px;
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: #333;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-complete-enter {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateX(30px);
|
|
|
|
|
}
|
|
|
|
|
.list-complete-enter-to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateX(0);
|
|
|
|
|
}
|
|
|
|
|
.list-complete-leave-to,.list-complete-leave-active {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateX(-30px);
|
|
|
|
|
}
|
|
|
|
|
.list-complete-leave-active,.list-complete-enter-active {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
transition: all .5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes jello-horizontal {
|
|
|
|
|
0% {
|
|
|
|
|
transform: scale3d(1, 1, 1);
|
|
|
|
|
}
|
|
|
|
|
7.5% {
|
|
|
|
|
transform: scale3d(1.25, 0.75, 1);
|
|
|
|
|
}
|
|
|
|
|
10% {
|
|
|
|
|
transform: scale3d(0.75, 1.25, 1);
|
|
|
|
|
}
|
|
|
|
|
12.5% {
|
|
|
|
|
transform: scale3d(1.15, 0.85, 1);
|
|
|
|
|
}
|
|
|
|
|
16.25% {
|
|
|
|
|
transform: scale3d(0.95, 1.05, 1);
|
|
|
|
|
}
|
|
|
|
|
18.75% {
|
|
|
|
|
transform: scale3d(1.05, 0.95, 1);
|
|
|
|
|
}
|
|
|
|
|
25% {
|
|
|
|
|
transform: scale3d(1, 1, 1);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: scale3d(1, 1, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
