feat(guess): 添加猜歌游戏胜利音效和优化样式
- 新增triumph.mp3作为胜利音效 - 优化guess.css中的动画效果和布局 - 调整guess.js中的音频播放逻辑和状态管理 - 更新guess.html页面结构和样式 - 修改song-request-station.js中的音频源路径
This commit is contained in:
@@ -218,7 +218,6 @@
|
||||
left: 997px;
|
||||
}
|
||||
.container .container-box .details {
|
||||
flex: 1;
|
||||
max-height: 500px;
|
||||
margin-bottom: 40px;
|
||||
width: 1200px;
|
||||
@@ -228,6 +227,7 @@
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
height: var(--base-height);
|
||||
}
|
||||
.container .container-box .details::after {
|
||||
content: "";
|
||||
@@ -268,6 +268,29 @@
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
}
|
||||
.container .container-box .details .fluctuate-box {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
align-items: self-end;
|
||||
z-index: 100;
|
||||
}
|
||||
.container .container-box .details .fluctuate-box .item {
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.container .container-box .details .fluctuate-box .item .item-item {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
border-radius: 2px;
|
||||
background-color: #7d4bf8;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.container .container-box .details .fluctuate-icon {
|
||||
width: 400px;
|
||||
height: 86px;
|
||||
@@ -293,6 +316,7 @@
|
||||
.container .container-box .details .start-box .start-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.container .container-box .details .start-box .start-right .suspect-text {
|
||||
height: calc(var(--base-height) * 0.112);
|
||||
@@ -306,7 +330,6 @@
|
||||
margin-bottom: calc(var(--base-height) * 0.058);
|
||||
}
|
||||
.container .container-box .details .start-box .start-right .start-icon {
|
||||
width: fit-content;
|
||||
height: calc(var(--base-height) * 0.138);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -362,8 +385,8 @@
|
||||
border-radius: 20px;
|
||||
}
|
||||
.container .container-box .details .answer-box .list .item .img-box.show {
|
||||
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
|
||||
animation: bg 2.5s infinite linear;
|
||||
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
|
||||
animation: bg 1.3s infinite linear;
|
||||
}
|
||||
@property --rotate {
|
||||
syntax: "<angle>";
|
||||
|
||||
Reference in New Issue
Block a user