shen/lottery
1
0
Fork 0
mirror of https://github.com/Aras-ax/lottery.git synced 2024-11-25 16:35:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

样式修改

Browse Source
This commit is contained in:
moshang-xc 2022-09-22 10:55:40 +08:00
parent 2ffc29448a
commit 28edcbd247
3 changed files with 86 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
product/src/index.html
View File

@ -35,8 +35,10 @@
<div id="lotteryBar" class="none">
<button id="lottery">开始抽奖</button>
<button id="reLottery">重新抽奖</button>
<button id="save">导出抽奖结果</button>
<button id="reset" class="margin-l-40">重置</button>
<div class="fixed-bar">
<button id="save" class="fixed-btn">导出抽奖结果</button>
<button id="reset" class="fixed-btn">重置</button>
</div>
</div>
</div>

127
product/src/lottery/index.css
View File

@ -260,36 +260,30 @@ button:active {
}
.progress-bar-striped {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent);
background-image: -o-linear-gradient(45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent);
background-image: linear-gradient(45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent);
-webkit-background-size: 8px 8px;
background-size: 8px 8px;
}
@ -351,7 +345,7 @@ button:active {
transform: scale(1.2);
transform-origin: left center;
position: relative;
overflow: hidden;
overflow: hidden;
}
.done {
@ -380,17 +374,18 @@ button:active {
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#03e9f4);
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite
}
@keyframes animate1 {
0% {
left: -100%
left: -100%
}
50%,100% {
left: 100%
50%,
100% {
left: 100%
}
}
@ -399,18 +394,19 @@ button:active {
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#03e9f4);
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: .25s
}
@keyframes animate2 {
0% {
top: -100%
top: -100%
}
50%,100% {
top: 100%
50%,
100% {
top: 100%
}
}
@ -419,18 +415,19 @@ button:active {
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#03e9f4);
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: .50s
}
@keyframes animate3 {
0% {
right: -100%
right: -100%
}
50%,100% {
right: 100%
50%,
100% {
right: 100%
}
}
@ -439,18 +436,19 @@ button:active {
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#03e9f4);
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: .75s
}
@keyframes animate4 {
0% {
bottom: -100%
bottom: -100%
}
50%,100% {
bottom: 100%
50%,
100% {
bottom: 100%
}
}
@ -537,3 +535,38 @@ button:active {
.margin-l-40 {
margin-left: 40px;
}
.fixed-bar {
position: fixed;
bottom: 20px;
right: 20px;
}
.fixed-btn {
margin: 20px 0 0;
width: 200px;
text-align: center;
display: block;
}
#lottery {
animation: breath 1.6s linear infinite;
box-shadow: 0px 0px 15px rgb(127 255 255 / 75%);
}
@keyframes breath {
0% {
transform: scale(0.9);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.8;
}
}

5
product/src/lottery/index.js
View File

@ -214,7 +214,7 @@ function bindEvent() {
rotateObj.stop();
btns.lottery.innerHTML = "开始抽奖";
} else {
addQipao("抽慢一点点～～");
addQipao("正在抽奖，抽慢一点点～～");
}
return false;
}
@ -397,7 +397,6 @@ function transform(targets, duration) {
)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
new TWEEN.Tween(this)
@ -710,7 +709,7 @@ function changeCard(cardIndex, user) {
card.innerHTML = `<div class="company">${COMPANY}</div><div class="name">${
user[1]
}</div><div class="details">${user[0] || ''}<br/>${user[2] || "PSST"}</div>`;
}</div><div class="details">${user[0] || ""}<br/>${user[2] || "PSST"}</div>`;
}
/**