This commit is contained in:
Dragon
2023-08-01 22:34:20 +08:00
parent ac7a7b51d3
commit 779dddffc8
5 changed files with 69 additions and 74 deletions

View File

@@ -116,7 +116,7 @@ body {
position: relative;
}
.blessingBag .blessingBag_in {
width: 7.9rem;
width: 7.8rem;
height: 2rem;
position: absolute;
left: 50%;
@@ -125,16 +125,10 @@ body {
border-radius: 0.1333333333rem;
overflow: hidden;
}
.blessingBag .blessingBag_in::-webkit-scrollbar {
width: 0;
display: none;
}
.blessingBag .blessingBag_in ul {
height: 100%;
width: 11.2rem;
list-style: none;
position: absolute;
left: 0;
animation: scrollLeft 3s linear infinite;
display: flex;
}
.blessingBag .blessingBag_in ul li {
width: 1.8666666667rem;
@@ -181,11 +175,8 @@ body {
padding-left: 0.0666666667rem;
}
@keyframes scrollLeft {
0% {
left: 0;
}
100% {
left: -3.3rem;
transform: translateX(-3.3rem);
}
}
@@ -197,4 +188,12 @@ body {
margin: 0 auto 0.4933333333rem;
}
.task {
width: 9.28rem;
height: 8.88rem;
background: url(../images/task.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0.6266666667rem;
}
/*# sourceMappingURL=index.css.map */

View File

@@ -134,7 +134,8 @@ body {
position: relative;
.blessingBag_in {
width: 7.9rem;
// width: 7.9rem;
width: px2rem(585, );
height: 2rem;
position: absolute;
left: 50%;
@@ -142,21 +143,11 @@ body {
top: 2.4rem;
border-radius: px2rem(10, );
overflow: hidden;
// overflow-x: scroll;
&::-webkit-scrollbar {
width: 0;
display: none;
}
ul {
height: 100%;
width: 11.2rem;
list-style: none;
position: absolute;
left: 0;
// left: -3.3rem;
// transition: all 0.3s;
animation: scrollLeft 3s linear infinite;
display: flex;
li {
width: px2rem(140, );
@@ -208,22 +199,27 @@ body {
}
@keyframes scrollLeft {
0% {
left: 0;
}
100% {
left: -3.3rem;
transform: translateX(-3.3rem);
// transform: translateX(px2rem(-400));
}
}
}
}
.magpieBridge {
width: px2rem(696, );
height: px2rem(730, );
background: url(../images/magpieBridge.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(37, );
}
.task {
width: px2rem(696, );
height: px2rem(666, );
background: url(../images/task.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(47, );
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

View File

@@ -40,50 +40,49 @@
<div></div>
<div></div>
</div>
<!-- 福袋展示 -->
<div class="blessingBag">
<div class="blessingBag_in">
<ul>
<li>
<img src="./images/logo.png" alt="" >
<p>飛上雲霄</p>
<b>177 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="" >
<p>情意捲軸</p>
<b>377 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="" >
<p>桃花灼灼</p>
<b>1777 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="" >
<p>花色漫漫</p>
<b>2777 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="" >
<p>相思鳥</p>
<b>13140 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="" >
<p>緣定今生</p>
<b>27777 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="" >
<p>飛上雲霄</p>
<b>177 钻</b>
</li>
</ul>
<div class="page1">
<!-- 福袋展示 -->
<div class="blessingBag">
<div class="blessingBag_in">
<ul>
<li>
<img src="./images/logo.png" alt="">
<p>飛上雲霄</p>
<b>177 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="">
<p>情意捲軸</p>
<b>377 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="">
<p>桃花灼灼</p>
<b>1777 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="">
<p>花色漫漫</p>
<b>2777 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="">
<p>相思鳥</p>
<b>13140 钻</b>
</li>
<li>
<img src="./images/logo.png" alt="">
<p>緣定今生</p>
<b>27777 钻</b>
</li>
</ul>
</div>
</div>
<!-- 鹊桥 -->
<div class="magpieBridge"></div>
<!-- 每日任务 -->
<div class="task"></div>
</div>
<!-- 鹊桥 -->
<div class="magpieBridge"></div>
</body>
</html>

View File

@@ -47,6 +47,7 @@ $(function () {
window.webkit.messageHandlers.closeWebView.postMessage(null)
}
})
$('.blessingBag .blessingBag_in ul').css('animation', 'scrollLeft 3s linear infinite');
}, 100)
})
})