vue写的活动页面-扭蛋机
2019-04-02 本文已影响6人
吃盖浇饭
扭蛋机，一听就很高大尚，公司让整，哎，烦心啊，vue-cli搭建的，效果就是点击开始，扭蛋机里扭蛋晃起来，然后摇完后，从下面口里出来要出的扭蛋。
扭蛋机
其实怎么说，扭蛋机分3部，额，动起来，动的过程，动结束效果
先说动起来，音乐是必不可少的
<audio id="audio">
<source src="http://fs.open.kugou.com/8e91da22e5a70d9dba2f495507cf6f0b/5c515b97/G014/M03/1F/17/Tg0DAFULMQeISv_4AAqjm_DkxeAAAAHqgMJ5JIACqOz100.m4a" type="audio/mp3">
</audio>
var audio = document.getElementById("audio");
if (audio.paused) {
// 开始播放当前点击的音频
this.isShowMusic = false;
this.$refs.music.style['animation-play-state'] = 'running'
audio.play();
} else {
this.isShowMusic = true;
this.isKaiMusic = false;
this.$refs.music.style['animation-play-state'] = 'paused'
audio.pause();
}
<div class="ball">
<img v-for="(item,index) in itemImg" :class="isA?'wieyi_'+(index+1):''" :src="'/static/img/'+item.img" alt="" />
</div>
这是初始分发小球，
其实说白了，就是点击开始的时候，isA变成true，添加class，然后css3动画开始弹跳，这个轨迹需要自己去摸索设置
.wieyi_1 {
animation: around1 1.5s linear infinite;
}
.wieyi_2 {
animation: around2 1.5s linear infinite;
}
.wieyi_3 {
animation: around3 1.5s linear infinite;
}
.wieyi_4 {
animation: around4 1.5s linear infinite;
}
.wieyi_5 {
animation: around5 1.5s linear infinite;
}
.wieyi_6 {
animation: around6 1.5s linear infinite;
}
.wieyi_7 {
animation: around7 1.5s linear infinite;
}
.wieyi_8 {
animation: around8 1.5s linear infinite;
}
.wieyi_9 {
animation: around9 1.5s linear infinite;
}
.wieyi_10 {
animation: around10 1.5s linear infinite;
}
有了动画效果，其实就可以随心所欲的动起来了
结束的时候，添加动态效果，让小球从小口出从上往下掉下里就行了
全部代码上
<template lang="html">
<div class="bannerTop">
<div class="controlmusic" ref="music" @click="isAudio()">
<img src="~img/oNmusic.png" v-if="isShowMusic" />
<audio id="audio">
<source src="http://fs.open.kugou.com/8e91da22e5a70d9dba2f495507cf6f0b/5c515b97/G014/M03/1F/17/Tg0DAFULMQeISv_4AAqjm_DkxeAAAAHqgMJ5JIACqOz100.m4a" type="audio/mp3">
</audio>
</div>
<div class="actderict">
<img src="~img/derict.png" />
</div>
<div class="gametitle">
<img src="~img/gametitle.png" alt="" />
</div>
<div class="game_qu">
<!--<img src="img/game.png"/>-->
<div class="eyes">
<img src="~img/eyeleft.png" />
<img src="~img/eyeright.png" />
</div>
<div class="eye_off">
<img src="~img/eye_off_left.png" />
<img src="~img/eye_off_right.png" />
</div>
<div class="mouch">
<div class="ball">
<img v-for="(item,index) in itemImg" :class="isA?'wieyi_'+(index+1):''" :src="'/static/img/'+item.img" alt="" />
</div>
<img src="~img/mosha.png" />
</div>
</div>
<div class="showballbg">
<transition name="ballmove">
<div class="zjd" v-if="isShowX">
<img :src="'/static/img/'+isWitch" alt="" />
</div>
</transition>
</div>
<div class="popDiv" v-show="popupVisible">
<mtPop @isPopupVisibleClick="isPopupVisibleClick" @isButtonClick="isButtonClick" :isPop=isPop></mtPop>
</div>
<transition name="fade">
<div class="isVodel" v-show="popupVisible" @touchmove.prevent>
</div>
</transition>
<div class="popup" v-show="toast_control">
<div class="popbg"></div>
<transition name="fadeName">
<div class="popboxb" v-if="toastName" ref="popBackground">
<img :class="{'imgLeft':imgShow}" src="~img/bg2.png" alt="" />
<img :class="{'imgRight':imgShow}" src="~img/bg4.png" alt="" />
</div>
</transition>
<div class="popbox" v-if="isShowPop">
<div class="img" :class="{'img1':isImgTrue}"></div>
<div class="words1">{{hasPrize.words1}}</div>
<div class="words2">{{hasPrize.words2}}</div>
<div class="words3" v-show="hasPrize.words3!=''">{{hasPrize.words3}}</div>
</div>
<div class="close" @click="buttonClick()" v-if="isShowPop"></div>
</div>
<div class="bottom">
<img src="~img/bottom.png" alt="" />
</div>
<div class="joingame" @click="draw()">
<img src="~img/join.png" />
</div>
</div>
</template>
<script>
import mtPop from "./mtPop.vue";
import bgBackground from "img/bg5.png";
import bgBackgroundFont from "img/bg1.png";
import {
initApi,
loginApi,
lotteryApi,
awardApi,
winning
} from "../api/api";
export default {
data() {
return {
isA: false,
itemImg: [],
isB: true,
isButton: false, //是否登录开关
isShowX: false,
popupVisible: false, //根据后端返回判断是否显示登录框
isPop: false, //传给子组件参数
toast_control: false, //抽奖结果和活动规则弹出框控制器
objectAllData: {},
isImgTrue: false, //谢谢参与按钮是否显示
hasPrize: {}, //抽奖之后弹出框信息
isShowMusic: true,
isKaiguan: false,
isKaiMusic: true, //点击触发音乐关闭
toastName: false,
imgShow: false,
isShowPop: false,
}
},
created() {
for (var i = 1; i < 17; i++) {
this.itemImg.push({
"img": "ball" + i + ".png"
})
}
console.log(this.itemImg);
},
mounted() {
this.loginMenu();
document.getElementById("audio").play();
console.log(document.getElementById("audio").paused)
if (!document.getElementById("audio").paused) {
this.isShowMusic = false;
this.$refs.music.style['animation-play-state'] = 'running'
}
},
components: {
mtPop
},
methods: {
buttonClick() {
this.toast_control = false;
this.isShowPop = false;
//document.getElementById("audio").pause();
//this.$refs.music.style['animation-play-state'] = 'paused'
//audio.currentTime = 0;
//this.isShowMusic = true;
},
isAudio() {
var audio = document.getElementById("audio");
if (audio.paused) {
// 开始播放当前点击的音频
this.isShowMusic = false;
this.$refs.music.style['animation-play-state'] = 'running'
audio.play();
} else {
this.isShowMusic = true;
this.isKaiMusic = false;
this.$refs.music.style['animation-play-state'] = 'paused'
audio.pause();
}
},
//获得商户下所有活动信息
initApiMenu() {
initApi().then((res) => {
if (res.httpCode == 200) {
document.title = res.data.marketingCampaign.activityName;
this.ObjectAll = res.data;
this.prize_list = [];
res.data.marketingCampaign.terms.forEach((item, index) => {
if (item.termType == 10) {
this.itemsList = item.termVal;
}
})
res.data.marketingCampaign.pictures.forEach((item) => {
})
} else {
this.$toast(res.retMsg);
}
})
},
//活动入口初始化
loginMenu() {
let paramsName = {};
if (window.location.host.split(".")[0] != "192") {
paramsName.actId = window.location.host.split(".")[0];
} else {
paramsName.actId = "vx1yxyzt";
}
let code = this.$route.query.code;
if (typeof(code) != "undefined" && code != "") {
paramsName.code = this.$route.query.code;
}
let queryObject = this.$route.fullPath;
let queryString = "";
if (queryObject.indexOf("?") > 0) {
queryString = queryObject.split("?")[1];
}
paramsName.queryString = queryString;
loginApi(paramsName).then((res) => {
if (res.httpCode == 200) {
//优先跳微信鉴权
if (res.data.signUrl) {
window.location.href = res.data.signUrl;
} else {
window.localStorage.setItem("activity_lefeng", res.data.sign);
this.initApiMenu();
}
this.isPop = true;
this.popupVisible = !res.data.loginStatus;
this.isButton = !res.data.loginStatus;
} else {
this.$toast(res.retMsg);
}
})
},
//弹出框，子传父方法
isButtonClick(val) {
this.isButton = val;
},
//弹出框，子传父方法
isPopupVisibleClick(val) {
this.popupVisible = val;
},
//弹出奖项效果
game_over(index) {
var obj = {}
this.toast_control = true;
this.toastName = true;
setTimeout(() => {
this.$refs.popBackground.style.backgroundImage = "url(" + bgBackground + ")"
this.imgShow = true;
}, 1500)
setTimeout(() => {
this.toastName = false;
this.imgShow = false;
this.isShowPop = true;
this.$refs.popBackground.style.backgroundImage = "url(" + bgBackgroundFont + ")"
if (index == 3) {
this.isImgTrue = false;
obj = {
type: 0,
words1: '谢谢参与',
words2: "不要气馁！",
words3: '还有更多大奖等着你~'
}
} else if (index == 1) {
this.isImgTrue = false;
obj = {
type: 1,
words1: '恭喜您！',
words2: "获得" + this.objectAllData.prizeName,
words3: ''
}
} else {
this.isImgTrue = true;
obj = {
type: 3,
words1: '抱歉！',
words2: '出现未知错误，请稍后再试',
words3: ''
}
}
this.hasPrize = obj;
}, 2800)
},
rotating(index) {
if (index == 1) {
this.game_over(3);
} else {
awardApi().then((res) => {
this.isShowX = false;
this.isWitch = "";
if (res.httpCode == 200) {
this.game_over(1);
} else {
this.game_over(2);
}
})
}
},
draw() {
if (this.isButton) {
this.popupVisible = true;
return;
}
this.$indicator.open({
text: '加载中...',
spinnerType: 'fading-circle'
});
if (this.isKaiguan) {
return;
}
lotteryApi().then((res) => {
this.$indicator.close()
this.isKaiguan = true;
if (res.httpCode == 200) {
if (this.isKaiMusic) {
var audio = document.getElementById("audio")
audio.play();
this.isShowMusic = false;
this.$refs.music.style['animation-play-state'] = 'running'
}
this.isShowX = false;
this.isWitch = "";
this.isA = true;
setTimeout(() => {
this.isA = false;
let num = Math.floor(7 * Math.random() + 1);
this.isWitch = "ball" + num + ".png";
this.isShowX = true;
this.objectAllData = res.data
}, 3000);
setTimeout(() => {
if (this.objectAllData.prizeName == "谢谢参与") {
this.rotating(1);
} else {
this.rotating(2);
}
this.isKaiguan = false;
}, 4000)
} else {
if (res.retCode == "10030001" || res.retCode == "10131024") {
localStorage.removeItem("activity_lefeng");
this.loginMenu();
} else {
this.$toast(res.retMsg);
}
}
});
}
}
}
</script>
<style lang="css" scoped>
.fadeName-enter-active,
.fadeName-leave-active {
transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fadeName-enter,
.fadeName-leave-to {
transform-origin: center center;
transform: scale(0.2);
}
.ballmove-enter-active,.ballmove-leave-active {
transition: all 1s ease;
}
.ballmove-enter{
top: -0.9rem;
}
.fadeOpcaty-enter-active,
.fadeOpcaty-leave-active {
transition: opacity 1s;
}
.fadeOpcaty-enter,
.fadeOpcaty-leave-to
{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .2s;
}
.fade-enter,
.fade-leave-to
{
opacity: 0;
}
.popDiv {
position: fixed;
background: #fff;
top: 30%;
left: 50%;
z-index: 250;
margin-left: -2.8rem;
opacity: 1;
width: 5.6rem;
}
.isVodel {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000;
z-index: 100;
}
</style>
引入的css文件
body {
/*background: linear-gradient(#b72258,#7141bb);*/
background: url(../img/bg.png) center 0 no-repeat, #7a3dc0;
height: 100%;
background-size: 100% 11.36rem;
}
#audio {
display: none;
}
.controlmusic {
position: absolute;
left: 0.23rem;
top: 0.1rem;
width: 0.64rem;
height: 0.64rem;
background: url(../img/music.png);
background-size: 100% 100%;
animation: music 2s linear infinite paused;
transform-origin: center center;
text-align: center;
line-height: 0.64rem;
z-index: 10;
}
.controlmusic img {
width: 0.43rem;
height: 0.43rem;
vertical-align: middle;
}
.actderict {
position: absolute;
right: 0.1rem;
top: 0.1rem;
}
.actderict img {
width: 1.29rem;
height: 0.8rem;
animation: direct 2s linear infinite alternate;
}
@keyframes music {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes direct {
0% {
transform: scale(0.7);
}
100% {
transform: scale(1.1);
}
}
.gametitle {
position: absolute;
left: 50%;
top: 0.18rem;
margin-left: -2.6rem;
z-index: 4;
}
.gametitle img {
width: 5.2rem;
height: 1.8rem;
}
.game_qu {
padding-top: 1.9rem;
left: 50%;
margin-left: -2.54rem;
top: 1.75rem;
position: absolute;
z-index: 30;
width: 5.08rem;
height: 6.35rem;
background: url(../img/game.png) 0 0 no-repeat;
background-size: 100% 100%;
}
.bottom {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 7rem;
z-index: 2;
}
.bottom img {
width: 5.46rem;
height: 2.18rem;
}
.eyes {
position: absolute;
top: 1.1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
width: 2.56rem;
}
.eyes img {
width: 0.32rem;
height: 0.46rem;
}
.eye_off {
position: absolute;
top: 1.1rem;
left: 50%;
margin-left: -1.28rem;
display: flex;
justify-content: space-between;
width: 2.56rem;
z-index: 4;
overflow: hidden;
animation: eyeAct 2s linear 1000ms infinite;
}
.eye_off img {
width: 0.34rem;
height: 0.51rem;
}
@keyframes eyeAct {
0% {
height: 0;
}
4% {
height: 0.51rem;
}
6% {
height: 0;
}
100% {
height: 0;
}
}
.zjd {
width: 0.9rem;
height: 0.9rem;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
top: 0rem;
}
.zjd img {
width: 0.76rem;
height: 0.76rem;
position: absolute;
left: .06rem;
}
.mouch {
text-align: center;
width: 3.56rem;
margin-left: auto;
margin-right: auto;
background: url(../img/mouth.png) 0 0 no-repeat;
background-size: 100% 100%;
position: relative;
}
.mouch>img {
width: 3.58rem;
height: 2.25rem;
position: absolute;
left: 0;
top: 0;
}
.showballbg {
position: absolute;
top: 6.2rem;
left: 50%;
transform: translateX(-50%);
border-radius: 0.45rem;
background: #082b45;
width: 0.9rem;
height: 0.9rem;
z-index: 2;
}
.ball {
width: 3.56rem;
height: 2.05rem;
overflow: hidden;
margin-left: auto;
margin-right: auto;
position: relative;
top: 0.05rem;
transform: rotate(0deg);
-webkit-border-radius: 1.56rem;
-moz-border-radius: 1.56rem;
-ms-border-radius: 1.56rem;
-o-border-radius: 1.56rem;
border-radius: 1.56rem;
}
.ball img {
width: 0.76rem;
height: 0.76rem;
position: absolute;
}
.ball img:nth-child(1) {
left: -0.1rem;
bottom: 0.3rem;
}
.ball img:nth-child(2) {
left: 0.56rem;
bottom: 0rem;
}
.ball img:nth-child(3) {
left: 1.1rem;
bottom: 0.43rem;
}
.ball img:nth-child(4) {
left: 1.8rem;
bottom: 0rem;
}
.ball img:nth-child(5) {
position: absolute;
left: 2.4rem;
bottom: 0rem;
}
.ball img:nth-child(6) {
left: 2.9rem;
bottom: 0.39rem;
}
.ball img:nth-child(7) {
left: 0.05rem;
bottom: 0.1rem;
}
.ball img:nth-child(8) {
left: 1.2rem;
bottom: -0.05rem;
}
.ball img:nth-child(9) {
left: 1.6rem;
bottom: -0.02rem;
}
.ball img:nth-child(10) {
left: 2.2rem;
bottom: 0
}
.ball img:nth-child(11) {
left: 2.6rem;
bottom: 0rem;
}
.ball img:nth-child(12) {
left: 2rem;
bottom: -0.02rem;
}
.ball img:nth-child(13) {
left: 0.7rem;
bottom: -0.1rem;
}
.ball img:nth-child(14) {
left: 1.6rem;
bottom: 0.7rem;
}
.ball img:nth-child(15) {
left: 2.1rem;
bottom: 0.7rem;
}
.ball img:nth-child(16) {
left: 0.5rem;
bottom: 0.6rem;
}
.joingame {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8.5rem;
z-index: 2;
}
.joingame img {
width: 2.45rem;
height: 0.88rem;
}
.popup {
width: 100%;
height: 100%;
position: fixed;
z-index: 30;
top: 0;
left: 0;
}
.popbg {
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
}
.popbox {
width: 5.54rem;
height: 4.98rem;
position: absolute;
top: 27%;
left: 0;
right: 0;
margin: auto;
background: url(../img/giftboxbg.png) top center no-repeat;
background-size: 100%;
text-align: center;
}
.popboxb {
width: 5.54rem;
height: 4.98rem;
position: absolute;
top: 27%;
left: 0;
right: 0;
margin: auto;
background: url(../img/bg1.png) top center no-repeat;
background-size: 100%;
}
.popboxb img {
width: 2.54rem;
}
.popboxb .imgLeft {
top: 2.3rem !important;
transition: all 1s;
}
.popboxb .imgRight {
top: 0.5rem !important;
transition: all 1s;
}
.popboxb img:nth-child(1) {
position: absolute;
left: 1.50rem;
top: 1.80rem;
transform: rotate(45deg);
}
.popboxb img:nth-child(2) {
position: absolute;
left: 1.50rem;
top: 1.17rem;
transform: rotate(45deg);
}
.popbox .img {
width: 3.06rem;
height: 1.4rem;
margin: auto;
margin-top: 1.07rem;
margin-left: 1.1rem;
background: url(../img/gift.png) top center no-repeat;
background-size: 100%;
}
.popbox .img1 {
background: url(../img/regret.png) top center no-repeat;
background-size: 100%;
}
.popbox .words1 {
font-size: 0.4rem;
color: #ff7d12;
margin-top: 0.2rem;
}
.popbox .words2 {
font-size: 0.28rem;
color: #ff8422;
padding-left: .7rem;
padding-right: .7rem;
}
.popbox .words3 {
font-size: 0.24rem;
color: #999999;
margin-top: 0.07rem;
}
.popup .close {
width: 0.5rem;
height: 0.5rem;
background: url(../img/close.png) top center no-repeat;
background-size: 100%;
position: absolute;
top: 75%;
left: 0;
right: 0;
margin: auto;
}
.wieyi_1 {
animation: around1 1.5s linear infinite;
}
.wieyi_2 {
animation: around2 1.5s linear infinite;
}
.wieyi_3 {
animation: around3 1.5s linear infinite;
}
.wieyi_4 {
animation: around4 1.5s linear infinite;
}
.wieyi_5 {
animation: around5 1.5s linear infinite;
}
.wieyi_6 {
animation: around6 1.5s linear infinite;
}
.wieyi_7 {
animation: around7 1.5s linear infinite;
}
.wieyi_8 {
animation: around8 1.5s linear infinite;
}
.wieyi_9 {
animation: around9 1.5s linear infinite;
}
.wieyi_10 {
animation: around10 1.5s linear infinite;
}
.wieyi_11 {
animation: around11 1.5s linear infinite;
}
.wieyi_12 {
animation: around12 1.5s linear infinite;
}
.wieyi_13 {
animation: around13 1.5s linear infinite;
}
.wieyi_14 {
animation: around14 1.5s linear infinite;
}
.wieyi_15 {
animation: around15 1.5s linear infinite;
}
.wieyi_16 {
animation: around16 1.5s linear infinite;
}
@keyframes around1 {
0% {
transform: translate(0px, 0px)
}
20% {
transform: translate(1rem, 1rem)
}
40% {
transform: translate(2.2rem, -1.3rem)
}
60% {
transform: translate(1.8rem, 0rem)
}
80% {
transform: translate(-0.5rem, -1rem)
}
100% {
transform: translate(2rem, 2.4rem)
}
}
@keyframes around2 {
0% {
transform: translate(0px, 0px)
}
10% {
transform: translate(300px, -120px)
}
30% {
transform: translate(250px, 130px)
}
50% {
transform: translate(-50px, -120px)
}
80% {
transform: translate(0px, 140px)
}
100% {
transform: translate(300px, -180px)
}
}
@keyframes around3 {
0% {
transform: translate(0px, 0px)
}
25% {
transform: translate(70px, -290px)
}
50% {
transform: translate(320px, 0px)
}
80% {
transform: translate(-20px, -290px)
}
100% {
transform: translate(290px, 0px)
}
}
@keyframes around4 {
0% {
transform: translate(0px, 0px)
}
12% {
transform: translate(50px, 250px)
}
30% {
transform: translate(-150px, -30px)
}
60% {
transform: translate(-140px, 260px)
}
80% {
transform: translate(-10px, -30px)
}
100% {
transform: translate(-20px, 260px)
}
}
@keyframes around5 {
0% {
transform: translate(0px, 0px)
}
22% {
transform: translate(-50px, -170px)
}
46% {
transform: translate(150px, 145px)
}
80% {
transform: translate(200px, -115px)
}
100% {
transform: translate(-100px, 145px)
}
}
@keyframes around6 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(260px, 40px)
}
30% {
transform: translate(-80px, -260px)
}
45% {
transform: translate(-40px, 40px)
}
60% {
transform: translate(100px, -290px)
}
75% {
transform: translate(-80px, -280px)
}
100% {
transform: translate(10px, 40px)
}
}
@keyframes around7 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(-100px, 40px)
}
30% {
transform: translate(80px, 60px)
}
45% {
transform: translate(-40px, 40px)
}
60% {
transform: translate(100px, -290px)
}
75% {
transform: translate(-80px, -280px)
}
100% {
transform: translate(50px, 80px)
}
}
@keyframes around8 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(120px, 20px)
}
30% {
transform: translate(-20px, -160px)
}
45% {
transform: translate(-10px, 10px)
}
60% {
transform: translate(100px, -290px)
}
75% {
transform: translate(-80px, -280px)
}
100% {
transform: translate(20px, 50px)
}
}
@keyframes around9 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(150px, 120px)
}
30% {
transform: translate(-10px, -10px)
}
45% {
transform: translate(-120px, 110px)
}
60% {
transform: translate(110px, -280px)
}
75% {
transform: translate(-10px, -180px)
}
100% {
transform: translate(30px, 40px)
}
}
@keyframes around10 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(110px, 10px)
}
30% {
transform: translate(-120px, -10px)
}
45% {
transform: translate(-110px, 110px)
}
60% {
transform: translate(10px, -20px)
}
75% {
transform: translate(-10px, -80px)
}
100% {
transform: translate(2px, 5px)
}
}
@keyframes around11 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(110px, 10px)
}
30% {
transform: translate(-20px, 10px)
}
45% {
transform: translate(-101px, 102px)
}
60% {
transform: translate(130px, 90px)
}
75% {
transform: translate(-180px, -280px)
}
100% {
transform: translate(0px, 10px)
}
}
@keyframes around12 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(10px, 120px)
}
30% {
transform: translate(-10px, -60px)
}
45% {
transform: translate(-101px, 10px)
}
60% {
transform: translate(10px, -90px)
}
75% {
transform: translate(80px, -80px)
}
100% {
transform: translate(10px, 50px)
}
}
@keyframes around13 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(110px, 20px)
}
30% {
transform: translate(-110px, -160px)
}
45% {
transform: translate(-20px, 10px)
}
60% {
transform: translate(10px, -290px)
}
75% {
transform: translate(0px, -280px)
}
100% {
transform: translate(0px, 50px)
}
}
@keyframes around14 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(20px, 20px)
}
30% {
transform: translate(0px, -160px)
}
45% {
transform: translate(0px, 100px)
}
60% {
transform: translate(100px, -90px)
}
75% {
transform: translate(-80px, -20px)
}
100% {
transform: translate(20px, 0px)
}
}
@keyframes around15 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(-90px, 40px)
}
30% {
transform: translate(70px, 50px)
}
45% {
transform: translate(-30px, 40px)
}
60% {
transform: translate(10px, -90px)
}
75% {
transform: translate(-80px, -280px)
}
100% {
transform: translate(0px, 80px)
}
}
@keyframes around16 {
0% {
transform: translate(0px, 0px)
}
15% {
transform: translate(10px, 10px)
}
30% {
transform: translate(10px, 60px)
}
45% {
transform: translate(0px, 100px)
}
60% {
transform: translate(100px, -90px)
}
75% {
transform: translate(80px, -20px)
}
100% {
transform: translate(20px, 10px)
}
}
