Skip to content

Commit

Permalink
I feel it finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@Weslie0803
Weslie0803 committed Oct 29, 2022
1 parent fa4fe50 commit f2b5e13
Show file tree
Hide file tree
Showing 6 changed files with 227 additions and 39 deletions.
54 changes: 50 additions & 4 deletions animate.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,17 @@
animation: BondFlash 3s linear infinite;
}

#result0 {
margin: auto;
transition: transform 2s;
transform-style: preserve-3d;
left: 0;
right:0;
top: 0;
bottom: 0;
width: 320px;
height: 580px;
}
#result {
margin: auto;
transition: transform 2s;
Expand Down Expand Up @@ -303,6 +314,16 @@ img.prize1 {
max-width: 150px;
max-height: 150px;
}
img.prize0 {
position: absolute;
margin: auto;
left: 0;
right:0;
top: 0;
bottom: 0;
max-width: 150px;
max-height: 150px;
}

.bondbg {
background-color: hsla(0,0%,100%,.6);
Expand Down Expand Up @@ -348,13 +369,13 @@ img.prize1 {
}

.ring8>.plane {
height: 150px;
width: 150px
height: 100px;
width: 100px
}

.ring82>.plane {
height: 150px;
width: 150px
height: 100px;
width: 100px
}

.col-xs-4>.showNum {
Expand Down Expand Up @@ -389,4 +410,29 @@ img.prize1 {
right:0;
top: 0;
bottom: 0;
}
#bb0 {
max-width: 100px;
max-height: 100px;
/* display: block; */
position: absolute;
margin: auto;
left: 0;
right:0;
top: 0;
bottom: 0;
}

.backnum {
position: absolute;
margin: auto;
left: 0;
right:0;
top: 0;
bottom: 0;
width: 140px;
height: 220px;
background-color: hsla(0,0%,100%,.5);
/* border: 1px solid #fff; */
border-radius: 100%;
}
26 changes: 26 additions & 0 deletions change.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ var toggleResult = function(num){

var toggleSecondPrize = function() {
$(".NumRolling").children("img").css("display", "none");
$(".NumRolling").children(".backnum").css("display", "none");
$(".NumRolling").children("ul").css("display", "inherit");
$(".row").css("transform", "translateY(2500px)");
$("#result1").parent().css("transform", "translateY(2500px)");
Expand All @@ -43,4 +44,29 @@ var toggleFirstPrize = function() {
$("#bond0").parent().parent().css("transform", "translateY(0px) translateZ(-250px) rotateZ(45deg)");
$("#card0").parent().parent().css("transform", "translateY(0px) translateZ(-380px)");
$("#result11").parent().css("transform", "translateY(2250px)");
$("#result0").parent().css("transform", "translateY(2250px)");
$("#num1").children("ul").css("display", "inherit");
$("#num1").children("img").css("display", "none");
// 清空row
$("#num1").children("ul").children("li").children("img").attr("src", "");
$("#num2").css("background-image","");
$("#num3").children("img").attr("src","");
}
var toggleSpecialPrize = function() {
$(".NumRolling").children("img").css("display", "none");
$(".NumRolling").children("ul").css("display", "inherit");
$(".row").css("transform", "translateY(2500px)");
$("#result1").parent().css("transform", "translateY(2500px)");
// $("#result").css("display", "none");
$("#bg0").parent().parent().css("transform", "translateY(0px) translateZ(-250px)");
$("#bond0").parent().parent().css("transform", "translateY(0px) translateZ(-250px) rotateZ(45deg)");
$("#card0").parent().parent().css("transform", "translateY(0px) translateZ(-380px)");
$("#result11").parent().css("transform", "translateY(2250px)");
$("#result0").parent().css("transform", "translateY(2250px)");
$("#num1").children("img").css("display", "inherit");
$("#num1").children("ul").css("display", "none");
// 清空row
$("#num1").children("img").attr("src", "");
$("#num2").css("background-image","");
$("#num3").children("img").attr("src","");
}
74 changes: 49 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</div>
</div>
<div id="container" class="container" >
<div id="stage" style="transform: translateZ(-250px) rotateZ(45deg);">
<div id="stage" style="transform: translateZ(-250px) rotateZ(45deg); padding-top: 50px;">
<div id="shape" class="ring8 backfaces cubeShow_0">
<div id="bond0" class="plane eine"> <img src="抽奖软件UI/键和方式/1-H2.png"> </div>
<div id="bond1" class="plane zwei"> <img src="抽奖软件UI/键和方式/2-水.png"> </div>
Expand Down Expand Up @@ -63,9 +63,10 @@
</div>
</div>
<div id="container" class="container">
<div id="stage">
<div id="result" style="display: none;">
<div id="stage" style="transform: translateY(2500px);">
<div id="result">
<div class="showNum CardUndefined">
<div class="backnum"></div>
<img id="n1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
Expand All @@ -77,10 +78,27 @@
</div>
</div>
</div>
<div id="container" class="container">
<div id="stage" style="transform: translateY(2250px);">
<div id="result0">
<div class="showNum">
<div class="backnum"></div>
<img id="n0" class="prize0" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
<img id="b0l" src="抽奖软件UI/键和方式/1-H2.png">
</div>
<div class="bondbg rightbottom">
<img id="b0r" src="抽奖软件UI/键和方式/1-H2.png">
</div>
</div>
</div>
</div>
<div id="container" class="container">
<div id="stage" style="transform: translateY(2250px);">
<div id="result11">
<div class="showNum">
<div class="backnum"></div>
<img id="n11" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
Expand All @@ -92,6 +110,7 @@
</div>
<div id="result12">
<div class="showNum">
<div class="backnum"></div>
<img id="n12" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
Expand All @@ -103,6 +122,7 @@
</div>
<div id="result13">
<div class="showNum">
<div class="backnum"></div>
<img id="n13" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
Expand All @@ -114,6 +134,7 @@
</div>
<div id="result14">
<div class="showNum">
<div class="backnum"></div>
<img id="n14" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
Expand All @@ -130,19 +151,20 @@
<div id="result1">
<div id="2p1" class="showNum">
<div class="NumRolling" >
<div class="backnum" style="display: none;"></div>
<img class="centerNum" style="display: none;">
<ul>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
</ul>
</div>
</div>
Expand All @@ -156,19 +178,20 @@
<div id="result2">
<div id="2p2" class="showNum">
<div class="NumRolling" >
<div class="backnum"></div>
<img class="centerNum">
<ul>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
<li><div class="backnum"></div><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
</ul>
</div>
</div>
Expand All @@ -185,6 +208,7 @@
<div class="row" style="transform: translateY(2500px);">
<div class="col-xs-4">
<div id="num1" class="showNum">
<img id="bb0" src="抽奖软件UI/键和方式/2-水.png">
<ul>
<li><img id="br1" ></li>
<li><img id="br2" ></li>
Expand Down
Loading

0 comments on commit f2b5e13

Please sign in to comment.