Skip to content

G
game-h5
Commit 4d00f7c2 by 曾经
Options

动画调整

parent b7ea6d66
Showing with 111 additions and 57 deletions
dist/index.html
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>game-h5</title><link rel="stylesheet" href="//at.alicdn.com/t/font_2844902_uelk5f2sikk.css"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><link href="css/chunk-09d0db87.c04481f2.css" rel="prefetch"><link href="css/chunk-19f41208.93bdc1c9.css" rel="prefetch"><link href="css/chunk-206d4c77.20828ead.css" rel="prefetch"><link href="css/chunk-390246b3.da21bd50.css" rel="prefetch"><link href="css/chunk-427eb5f0.b9690f98.css" rel="prefetch"><link href="css/chunk-4990c547.31bbc6f1.css" rel="prefetch"><link href="css/chunk-4b1efb49.432dbb80.css" rel="prefetch"><link href="css/chunk-5ea88b5e.c37924f6.css" rel="prefetch"><link href="css/chunk-633de545.188d4a13.css" rel="prefetch"><link href="css/chunk-67a3e9d6.34a358b5.css" rel="prefetch"><link href="css/chunk-71639305.f21c9ef5.css" rel="prefetch"><link href="css/chunk-724568a8.00555196.css" rel="prefetch"><link href="css/chunk-cccf5f40.5c518a1b.css" rel="prefetch"><link href="js/chunk-09d0db87.a448d57a.js" rel="prefetch"><link href="js/chunk-19f41208.42ef2138.js" rel="prefetch"><link href="js/chunk-206d4c77.4f62d7a4.js" rel="prefetch"><link href="js/chunk-3566c97c.3f1cfa5e.js" rel="prefetch"><link href="js/chunk-390246b3.a2a8ddb7.js" rel="prefetch"><link href="js/chunk-427eb5f0.d05e4b99.js" rel="prefetch"><link href="js/chunk-4990c547.bf5edc68.js" rel="prefetch"><link href="js/chunk-4aa552e1.221177b9.js" rel="prefetch"><link href="js/chunk-4b1efb49.7770f9fb.js" rel="prefetch"><link href="js/chunk-5ea88b5e.9fc6b0b4.js" rel="prefetch"><link href="js/chunk-633de545.4a54f34f.js" rel="prefetch"><link href="js/chunk-67a3e9d6.ec5df3b5.js" rel="prefetch"><link href="js/chunk-71639305.e7456eb5.js" rel="prefetch"><link href="js/chunk-724568a8.4803c6db.js" rel="prefetch"><link href="js/chunk-72be1171.dce6850f.js" rel="prefetch"><link href="js/chunk-cccf5f40.98ea16e2.js" rel="prefetch"><link href="js/app.ddde3b8c.js" rel="preload" as="script"><link href="js/chunk-vendors.37f2d3ab.js" rel="preload" as="script"></head><body><noscript><strong>We're sorry but game-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/axios/0.18.0/index.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script src="js/chunk-vendors.37f2d3ab.js"></script><script src="js/app.ddde3b8c.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>game-h5</title><link rel="stylesheet" href="//at.alicdn.com/t/font_2844902_uelk5f2sikk.css"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><link href="css/chunk-09d0db87.c04481f2.css" rel="prefetch"><link href="css/chunk-19f41208.93bdc1c9.css" rel="prefetch"><link href="css/chunk-30bd36ae.d46db738.css" rel="prefetch"><link href="css/chunk-35ef0fed.5ff6495b.css" rel="prefetch"><link href="css/chunk-390246b3.da21bd50.css" rel="prefetch"><link href="css/chunk-4990c547.31bbc6f1.css" rel="prefetch"><link href="css/chunk-4b1efb49.432dbb80.css" rel="prefetch"><link href="css/chunk-5ea88b5e.c37924f6.css" rel="prefetch"><link href="css/chunk-65f0d7d2.e58fc8e6.css" rel="prefetch"><link href="css/chunk-67a3e9d6.34a358b5.css" rel="prefetch"><link href="css/chunk-71639305.f21c9ef5.css" rel="prefetch"><link href="css/chunk-724568a8.00555196.css" rel="prefetch"><link href="css/chunk-cccf5f40.5c518a1b.css" rel="prefetch"><link href="js/chunk-09d0db87.a448d57a.js" rel="prefetch"><link href="js/chunk-19f41208.42ef2138.js" rel="prefetch"><link href="js/chunk-30bd36ae.dab15388.js" rel="prefetch"><link href="js/chunk-3566c97c.3f1cfa5e.js" rel="prefetch"><link href="js/chunk-35ef0fed.7f48d171.js" rel="prefetch"><link href="js/chunk-390246b3.a2a8ddb7.js" rel="prefetch"><link href="js/chunk-4990c547.bf5edc68.js" rel="prefetch"><link href="js/chunk-4aa552e1.221177b9.js" rel="prefetch"><link href="js/chunk-4b1efb49.7770f9fb.js" rel="prefetch"><link href="js/chunk-5ea88b5e.9fc6b0b4.js" rel="prefetch"><link href="js/chunk-65f0d7d2.a9793ef9.js" rel="prefetch"><link href="js/chunk-67a3e9d6.ec5df3b5.js" rel="prefetch"><link href="js/chunk-71639305.e7456eb5.js" rel="prefetch"><link href="js/chunk-724568a8.4803c6db.js" rel="prefetch"><link href="js/chunk-72be1171.dce6850f.js" rel="prefetch"><link href="js/chunk-cccf5f40.98ea16e2.js" rel="prefetch"><link href="js/app.b6e37058.js" rel="preload" as="script"><link href="js/chunk-vendors.37f2d3ab.js" rel="preload" as="script"></head><body><noscript><strong>We're sorry but game-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/axios/0.18.0/index.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script src="js/chunk-vendors.37f2d3ab.js"></script><script src="js/app.b6e37058.js"></script></body></html>
\ No newline at end of file \ No newline at end of file
src/components/cmh/theme-1/index.vue
...@@ -223,7 +223,7 @@ export default { ...@@ -223,7 +223,7 @@ export default {
top: "252px", top: "252px",
}, },
{ {
left: "calc(66% - 47px)", left: "calc(69% - 47px)",
top: "248px", top: "248px",
}, },
{ {
...@@ -243,7 +243,7 @@ export default { ...@@ -243,7 +243,7 @@ export default {
top: "341px", top: "341px",
}, },
{ {
left: "calc(68% - 47px)", left: "calc(70% - 47px)",
top: "345px", top: "345px",
}, },
{ {
...@@ -412,7 +412,7 @@ export default { ...@@ -412,7 +412,7 @@ export default {
} else { } else {
this.openBoxTitle = ""; this.openBoxTitle = "";
} }
}, 700); }, 900);
}, },
toGameRule() { toGameRule() {
this.$router.push({ this.$router.push({
...@@ -657,19 +657,33 @@ export default { ...@@ -657,19 +657,33 @@ export default {
transform: translate(0, 0); transform: translate(0, 0);
} }
} }
@keyframes box-active-animation {
@keyframes box-up-animation{
0% { 0% {
transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1);
} }
60% { 100% {
transform: translate(-50%, -80%) scale(1); transform: translate(0, -50%) scale(1);
}
}
@keyframes box-active-animation {
0% {
transform: translate(0, -50%) scale(1);
}
99% {
transform: translate(-50%, -50%) scale(1.8);
left: 50%; left: 50%;
top: 346px;
z-index: 10; z-index: 10;
opacity: 1
} }
100% { 100% {
transform: translate(-50%, -50%) scale(1.3); transform: translate(-50%, -50%) scale(1.8);
left: 50%; left: 50%;
top: 346px;
z-index: 10; z-index: 10;
opacity: 0;
} }
} }
.box-box img { .box-box img {
...@@ -682,6 +696,7 @@ export default { ...@@ -682,6 +696,7 @@ export default {
animation-duration: 0.2s; animation-duration: 0.2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-iteration-count: 1; animation-iteration-count: 1;
z-index: 1;
} }
.box-box img:nth-child(9) { .box-box img:nth-child(9) {
animation-delay: 0s; animation-delay: 0s;
...@@ -716,12 +731,12 @@ export default { ...@@ -716,12 +731,12 @@ export default {
} }
.box-box img.active { .box-box img.active {
animation-timing-function: ease-in; animation-timing-function: linear, linear;
animation-name: box-active-animation; animation-name: box-up-animation, box-active-animation;
animation-duration: 0.6s; animation-duration: 0.3s, 0.3s;
/* animation-fill-mode: forwards; */ animation-fill-mode: forwards, forwards;
animation-iteration-count: 1; animation-iteration-count: 1, 1;
animation-delay: 0s; animation-delay: 0s, 0.4s;
} }
.points-count-box { .points-count-box {
......
src/components/cmh/theme-2/index.vue
...@@ -203,39 +203,39 @@ export default { ...@@ -203,39 +203,39 @@ export default {
barrageList: [], barrageList: [],
boxList: [ boxList: [
{ {
left: "calc(23% - 47px)", left: "calc(21% - 50px)",
top: "204px", top: "200px",
}, },
{ {
left: "calc(45% - 47px)", left: "calc(45% - 50px)",
top: "204px", top: "200px",
}, },
{ {
left: "calc(68% - 47px)", left: "calc(69% - 50px)",
top: "204px", top: "200px",
}, },
{ {
left: "calc(30% - 47px)", left: "calc(29% - 50px)",
top: "281px", top: "279px",
}, },
{ {
left: "calc(53% - 47px)", left: "calc(53% - 50px)",
top: "281px", top: "279px",
}, },
{ {
left: "calc(76% - 47px)", left: "calc(77% - 50px)",
top: "281px", top: "279px",
}, },
{ {
left: "calc(23% - 47px)", left: "calc(21% - 50px)",
top: "368px", top: "368px",
}, },
{ {
left: "calc(45% - 47px)", left: "calc(45% - 50px)",
top: "368px", top: "368px",
}, },
{ {
left: "calc(68% - 47px)", left: "calc(69% - 50px)",
top: "368px", top: "368px",
}, },
], ],
...@@ -399,7 +399,7 @@ export default { ...@@ -399,7 +399,7 @@ export default {
} else { } else {
this.openBoxTitle = ""; this.openBoxTitle = "";
} }
}, 700); }, 900);
}, },
toGameRule() { toGameRule() {
this.$router.push({ this.$router.push({
...@@ -593,12 +593,25 @@ export default { ...@@ -593,12 +593,25 @@ export default {
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
border: 1px solid white; background: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.3);
color: #21252b; color: #21252b;
font-size: 12px; font-size: 12px;
} }
.integral::before{
content: " ";
position: absolute;
border-radius: 16px;
border: 1px solid black;
box-sizing: border-box;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
transform: scale(0.5);
z-index: 1;
}
.swiper-class { .swiper-class {
position: absolute; position: absolute;
left: 20px; left: 20px;
...@@ -645,26 +658,39 @@ export default { ...@@ -645,26 +658,39 @@ export default {
animation-delay: 0; animation-delay: 0;
} }
} }
@keyframes box-active-animation { @keyframes box-up-animation{
0% { 0% {
transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1);
} }
60% { 100% {
transform: translate(-50%, -80%) scale(1); transform: translate(0, -50%) scale(1);
}
}
@keyframes box-active-animation {
0% {
transform: translate(0, -50%) scale(1);
}
99% {
transform: translate(-50%, -50%) scale(1.8);
left: 50%; left: 50%;
top: 346px;
z-index: 10; z-index: 10;
opacity: 1
} }
100% { 100% {
transform: translate(-50%, -50%) scale(1.3); transform: translate(-50%, -50%) scale(1.8);
left: 50%; left: 50%;
top: 346px;
z-index: 10; z-index: 10;
opacity: 0;
} }
} }
.box-box img { .box-box img {
position: absolute; position: absolute;
transform: translate(0, -100px); transform: translate(0, -100px);
width: 95px; width: 100px;
height: 95px; height: 100px;
animation-timing-function: linear; animation-timing-function: linear;
animation-name: box-animation; animation-name: box-animation;
animation-duration: 0.2s; animation-duration: 0.2s;
...@@ -705,12 +731,12 @@ export default { ...@@ -705,12 +731,12 @@ export default {
} }
.box-box img.active { .box-box img.active {
animation-timing-function: ease-in; animation-timing-function: linear, linear;
animation-name: box-active-animation; animation-name: box-up-animation, box-active-animation;
animation-duration: 0.6s; animation-duration: 0.3s, 0.3s;
/* animation-fill-mode: forwards; */ animation-fill-mode: forwards, forwards;
animation-iteration-count: 1; animation-iteration-count: 1, 1;
animation-delay: 0s; animation-delay: 0s, 0.4s;
} }
.points-count-box { .points-count-box {
......
src/components/cmh/theme-3/index.vue
...@@ -387,7 +387,7 @@ export default { ...@@ -387,7 +387,7 @@ export default {
} else { } else {
this.openBoxTitle = ""; this.openBoxTitle = "";
} }
}, 700); }, 900);
}, },
toGameRule() { toGameRule() {
this.$router.push({ this.$router.push({
...@@ -638,19 +638,32 @@ body{ ...@@ -638,19 +638,32 @@ body{
} }
} }
@keyframes box-active-animation { @keyframes box-up-animation{
0% { 0% {
transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1);
} }
60% { 100% {
transform: translate(-50%, -80%) scale(1); transform: translate(0, -50%) scale(1);
}
}
@keyframes box-active-animation {
0% {
transform: translate(0, -50%) scale(1);
}
99% {
transform: translate(-50%, -50%) scale(1.8);
left: 50%; left: 50%;
top: 346px;
z-index: 10; z-index: 10;
opacity: 1
} }
100% { 100% {
transform: translate(-50%, -50%) scale(1.3); transform: translate(-50%, -50%) scale(1.8);
left: 50%; left: 50%;
top: 346px;
z-index: 10; z-index: 10;
opacity: 0;
} }
} }
.box-box img { .box-box img {
...@@ -689,12 +702,12 @@ body{ ...@@ -689,12 +702,12 @@ body{
} }
.box-box img.active { .box-box img.active {
animation-timing-function: ease-in; animation-timing-function: linear, linear;
animation-name: box-active-animation; animation-name: box-up-animation, box-active-animation;
animation-duration: 0.6s; animation-duration: 0.3s, 0.3s;
animation-fill-mode: forwards; animation-fill-mode: forwards, forwards;
animation-iteration-count: 1; animation-iteration-count: 1, 1;
animation-delay: 0s; animation-delay: 0s, 0.4s;
} }
.points-count-box { .points-count-box {
...@@ -712,7 +725,7 @@ body{ ...@@ -712,7 +725,7 @@ body{
font-family: DINAlternate-Bold, DINAlternate; font-family: DINAlternate-Bold, DINAlternate;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #D8FCFA;
line-height: 23px; line-height: 23px;
position: relative; position: relative;
z-index: 2; z-index: 2;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment