Skip to content

Commit

Permalink
一等奖基本完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@Weslie0803
Weslie0803 committed Oct 29, 2022
1 parent ce40697 commit cfbe405
Show file tree
Hide file tree
Showing 5 changed files with 280 additions and 41 deletions.
86 changes: 86 additions & 0 deletions animate.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,38 @@
height: 580px;
position: absolute;
}
#result11 {
transition: transform 2s;
transform-style: preserve-3d;
left: -350px;
width: 320px;
height: 580px;
position: absolute;
}
#result12 {
transition: transform 2s;
transform-style: preserve-3d;
left: 15px;
width: 320px;
height: 580px;
position: absolute;
}
#result13 {
transition: transform 2s;
transform-style: preserve-3d;
right: 15px;
width: 320px;
height: 580px;
position: absolute;
}
#result14 {
transition: transform 2s;
transform-style: preserve-3d;
right: -350px;
width: 320px;
height: 580px;
position: absolute;
}

#result>.CardUndefined>img {
position: absolute;
Expand All @@ -261,6 +293,16 @@
max-width: 150px;
max-height: 150px;
}
img.prize1 {
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 All @@ -274,6 +316,16 @@
width: 50px;
height: 50px;
}
.bondbg>img {
position: absolute;
margin: auto;
left: 0;
right:0;
top: 0;
bottom: 0;
max-width: 50px;
max-height: 50px;
}

.lefttop {
left: 40px;
Expand Down Expand Up @@ -303,4 +355,38 @@
.ring82>.plane {
height: 150px;
width: 150px
}

.col-xs-4>.showNum {
height: 320px;
}

#num1>ul li {
position: relative;
list-style-type: none;
float: left;
width: 60px;
height: 60px;
}
#num1>ul {
position: absolute;
margin: auto;
left: 0;
right:0;
top: 0;
bottom: 0;
width: 60px;
height:240px;
padding-left: 0;
}
#num1>ul li >img {
max-width: 50px;
max-height: 50px;
/* display: block; */
position: absolute;
margin: auto;
left: 0;
right:0;
top: 0;
bottom: 0;
}
3 changes: 2 additions & 1 deletion change.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,11 @@ var toggleSecondPrize = function() {
var toggleFirstPrize = function() {
$(".NumRolling").children("img").css("display", "none");
$(".NumRolling").children("ul").css("display", "inherit");
$(".row").css("display", "none");
$(".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)");
}
120 changes: 87 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,54 @@
</div>
</div>
</div>
<div id="container" class="container">
<div id="stage" style="transform: translateY(2250px);">
<div id="result11">
<div class="showNum">
<img id="n11" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
<img id="b11l" src="抽奖软件UI/键和方式/1-H2.png">
</div>
<div class="bondbg rightbottom">
<img id="b11r" src="抽奖软件UI/键和方式/1-H2.png">
</div>
</div>
<div id="result12">
<div class="showNum">
<img id="n12" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
<img id="b12l" src="抽奖软件UI/键和方式/1-H2.png">
</div>
<div class="bondbg rightbottom">
<img id="b12r" src="抽奖软件UI/键和方式/1-H2.png">
</div>
</div>
<div id="result13">
<div class="showNum">
<img id="n13" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
<img id="b13l" src="抽奖软件UI/键和方式/1-H2.png">
</div>
<div class="bondbg rightbottom">
<img id="b13r" src="抽奖软件UI/键和方式/1-H2.png">
</div>
</div>
<div id="result14">
<div class="showNum">
<img id="n14" class="prize1" src="抽奖软件UI/数字/0.png">
</div>
<div class="bondbg lefttop">
<img id="b14l" src="抽奖软件UI/键和方式/1-H2.png">
</div>
<div class="bondbg rightbottom">
<img id="b14r" src="抽奖软件UI/键和方式/1-H2.png">
</div>
</div>
</div>
</div>
<div id="container" class="container">
<div id="stage" style="transform: translateY(2500px);">
<div id="result1">
Expand All @@ -98,10 +146,10 @@
</ul>
</div>
</div>
<div class="bondbg2 lefttop">
<div class="bondbg lefttop">
<div class="BondUndefined"></div>
</div>
<div class="bondbg2 rightbottom">
<div class="bondbg rightbottom">
<div class="BondUndefined"></div>
</div>
</div>
Expand All @@ -124,57 +172,63 @@
</ul>
</div>
</div>
<div class="bondbg2 lefttop">
<div class="bondbg lefttop">
<div class="BondUndefined"></div>
</div>
<div class="bondbg2 rightbottom">
<div class="bondbg rightbottom">
<div class="BondUndefined"></div>
</div>
</div>
</div>
</div>
<div id="container" class="container">
<div class="row" style="display: none;">
<div class="row" style="transform: translateY(2500px);">
<div class="col-xs-4">
<div id="num1" class="showNum">
<div class="CardRolling" >
<ul>
<li><img id="br1" ></li>
<li><img id="br2" ></li>
<li><img id="br3" ></li>
<li><img id="br4" ></li>
</ul>
<!-- <div class="CardRolling">
<ul>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
<li><img src="抽奖软件UI/底色/复合/复合2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
<li><img src="抽奖软件UI/底色/复合/复合2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
</ul>
</div>

</div> -->
</div>
</div>
<div class="col-xs-4">
<div id="num2" class="showNum">
<div class="NumRolling" >
<!-- <div class="NumRolling" >
<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><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>
</ul>
</div>
</div> -->
</div>
</div>
<div class="col-xs-4">
<div id="num3" class="showNum">
<div class="BondRolling">
<img class="centerNum">
<!-- <div class="BondRolling">
<ul>
<li><img src="抽奖软件UI/键和方式/1-H2.png"></li>
<li><img src="抽奖软件UI/键和方式/2-水.png"></li>
Expand All @@ -185,15 +239,15 @@
<li><img src="抽奖软件UI/键和方式/7-简单立方.png"></li>
<li><img src="抽奖软件UI/键和方式/8-BCC.png"></li>
</ul>
</div>
</div> -->
</div>
</div>
<div class="col-xs-4">
<div id="num4" class="showNum"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
!function(e, a, t, n, g, c) {
Expand Down
Loading

0 comments on commit cfbe405

Please sign in to comment.