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>
\ No newline at end of file
<!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
src/components/cmh/theme-1/index.vue
......@@ -223,7 +223,7 @@ export default {
top: "252px",
},
{
left: "calc(66% - 47px)",
left: "calc(69% - 47px)",
top: "248px",
},
{
......@@ -243,7 +243,7 @@ export default {
top: "341px",
},
{
left: "calc(68% - 47px)",
left: "calc(70% - 47px)",
top: "345px",
},
{
......@@ -412,7 +412,7 @@ export default {
} else {
this.openBoxTitle = "";
}
}, 700);
}, 900);
},
toGameRule() {
this.$router.push({
......@@ -657,19 +657,33 @@ export default {
transform: translate(0, 0);
}
}
@keyframes box-active-animation {
@keyframes box-up-animation{
0% {
transform: translate(0, 0) scale(1);
}
60% {
transform: translate(-50%, -80%) scale(1);
100% {
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%;
top: 346px;
z-index: 10;
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale(1.3);
transform: translate(-50%, -50%) scale(1.8);
left: 50%;
top: 346px;
z-index: 10;
opacity: 0;
}
}
.box-box img {
......@@ -682,6 +696,7 @@ export default {
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
z-index: 1;
}
.box-box img:nth-child(9) {
animation-delay: 0s;
......@@ -716,12 +731,12 @@ export default {
}
.box-box img.active {
animation-timing-function: ease-in;
animation-name: box-active-animation;
animation-duration: 0.6s;
/* animation-fill-mode: forwards; */
animation-iteration-count: 1;
animation-delay: 0s;
animation-timing-function: linear, linear;
animation-name: box-up-animation, box-active-animation;
animation-duration: 0.3s, 0.3s;
animation-fill-mode: forwards, forwards;
animation-iteration-count: 1, 1;
animation-delay: 0s, 0.4s;
}
.points-count-box {
......
src/components/cmh/theme-2/index.vue
......@@ -203,39 +203,39 @@ export default {
barrageList: [],
boxList: [
{
left: "calc(23% - 47px)",
top: "204px",
left: "calc(21% - 50px)",
top: "200px",
},
{
left: "calc(45% - 47px)",
top: "204px",
left: "calc(45% - 50px)",
top: "200px",
},
{
left: "calc(68% - 47px)",
top: "204px",
left: "calc(69% - 50px)",
top: "200px",
},
{
left: "calc(30% - 47px)",
top: "281px",
left: "calc(29% - 50px)",
top: "279px",
},
{
left: "calc(53% - 47px)",
top: "281px",
left: "calc(53% - 50px)",
top: "279px",
},
{
left: "calc(76% - 47px)",
top: "281px",
left: "calc(77% - 50px)",
top: "279px",
},
{
left: "calc(23% - 47px)",
left: "calc(21% - 50px)",
top: "368px",
},
{
left: "calc(45% - 47px)",
left: "calc(45% - 50px)",
top: "368px",
},
{
left: "calc(68% - 47px)",
left: "calc(69% - 50px)",
top: "368px",
},
],
......@@ -399,7 +399,7 @@ export default {
} else {
this.openBoxTitle = "";
}
}, 700);
}, 900);
},
toGameRule() {
this.$router.push({
......@@ -593,12 +593,25 @@ export default {
padding: 0 10px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid white;
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.8);
color: #21252b;
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 {
position: absolute;
left: 20px;
......@@ -645,26 +658,39 @@ export default {
animation-delay: 0;
}
}
@keyframes box-active-animation {
@keyframes box-up-animation{
0% {
transform: translate(0, 0) scale(1);
}
60% {
transform: translate(-50%, -80%) scale(1);
100% {
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%;
top: 346px;
z-index: 10;
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale(1.3);
transform: translate(-50%, -50%) scale(1.8);
left: 50%;
top: 346px;
z-index: 10;
opacity: 0;
}
}
.box-box img {
position: absolute;
transform: translate(0, -100px);
width: 95px;
height: 95px;
width: 100px;
height: 100px;
animation-timing-function: linear;
animation-name: box-animation;
animation-duration: 0.2s;
......@@ -705,12 +731,12 @@ export default {
}
.box-box img.active {
animation-timing-function: ease-in;
animation-name: box-active-animation;
animation-duration: 0.6s;
/* animation-fill-mode: forwards; */
animation-iteration-count: 1;
animation-delay: 0s;
animation-timing-function: linear, linear;
animation-name: box-up-animation, box-active-animation;
animation-duration: 0.3s, 0.3s;
animation-fill-mode: forwards, forwards;
animation-iteration-count: 1, 1;
animation-delay: 0s, 0.4s;
}
.points-count-box {
......
src/components/cmh/theme-3/index.vue
......@@ -387,7 +387,7 @@ export default {
} else {
this.openBoxTitle = "";
}
}, 700);
}, 900);
},
toGameRule() {
this.$router.push({
......@@ -638,19 +638,32 @@ body{
}
}
@keyframes box-active-animation {
@keyframes box-up-animation{
0% {
transform: translate(0, 0) scale(1);
}
60% {
transform: translate(-50%, -80%) scale(1);
100% {
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%;
top: 346px;
z-index: 10;
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale(1.3);
transform: translate(-50%, -50%) scale(1.8);
left: 50%;
top: 346px;
z-index: 10;
opacity: 0;
}
}
.box-box img {
......@@ -689,12 +702,12 @@ body{
}
.box-box img.active {
animation-timing-function: ease-in;
animation-name: box-active-animation;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-delay: 0s;
animation-timing-function: linear, linear;
animation-name: box-up-animation, box-active-animation;
animation-duration: 0.3s, 0.3s;
animation-fill-mode: forwards, forwards;
animation-iteration-count: 1, 1;
animation-delay: 0s, 0.4s;
}
.points-count-box {
......@@ -712,7 +725,7 @@ body{
font-family: DINAlternate-Bold, DINAlternate;
font-size: 20px;
font-weight: 600;
color: #ffffff;
color: #D8FCFA;
line-height: 23px;
position: relative;
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