/* 现代化按钮样式系统 */
body,html{position:relative;height:100%;width:100%;margin:0;padding:0;overflow-x:hidden}
.blessing-text,.red-packet-modal{text-align:center;position:fixed}
/* 主按钮容器 - 现代化玻璃拟态设计 */
.index_index_b {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.1);
font-weight: 600;
position: relative;
overflow: hidden;
width: 90%;
max-width: 300px;
margin: 15px auto;
padding: 14px 0;
border: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: rgba(255, 255, 255, 0.95);
font-size: 16px;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
/* 按钮悬停效果 - 现代微交互 */
.index_index_b:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.2);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.15);
}
/* 按钮点击效果 */
.index_index_b:active {
transform: translateY(0) scale(0.98);
background: rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* 特定按钮样式 - 现代化渐变色彩 */
#timeclock, #tzjinzhuijia {
background: linear-gradient(135deg,
rgba(255, 149, 0, 0.3) 0%,
rgba(255, 107, 0, 0.2) 50%,
rgba(255, 149, 0, 0.3) 100%);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
position: relative;
}
/* 为特定按钮添加流光效果 */
#timeclock::before, #tzjinzhuijia::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
transition: left 0.5s ease;
}
#timeclock:hover::before, #tzjinzhuijia:hover::before {
left: 100%;
}
/* 追加挑战金按钮特殊样式 */
#tzjinzhuijia {
background: linear-gradient(135deg,
rgba(76, 175, 80, 0.3) 0%,
rgba(56, 142, 60, 0.2) 50%,
rgba(76, 175, 80, 0.3) 100%);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
}
/* 现代化滚动条样式 - 增强雾面玻璃质感 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15)}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.6));border-radius:6px;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 8px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.7));transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.3)}
::-webkit-scrollbar-thumb:active{background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.8));transform:scale(.95)}
::-webkit-scrollbar-corner{background:rgba(255,255,255,.05);border-radius:0 0 6px 0}
/* Firefox滚动条样式 - 增强雾面效果 */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) rgba(255,255,255,.1)}.wap_content{transform:none!important;-webkit-transform:none!important}.index_marquee{background:rgba(45,45,45,.95);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#fff;display:flex;display:-webkit-flex;display:-webkit-box;padding:0 5px;border-radius:12px;margin:0 5px 0;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 20px rgba(0,0,0,.3)}.index_marquee img{width:20px;margin-top:5px}.index_marquee .marquee{height:30px;overflow:hidden;line-height:30px;flex:1;-webkit-box-flex:1;-webkit-flex:1;padding-left:10px;color:#f2f2f2;font-size:12px}.xinrenlibao{position:fixed;right:5px;bottom:46px;width:130px;z-index:99}.pguize{font-size:13px;color:#fff;padding:0;display:inline-block;margin:0;position:relative;z-index:1;width:auto}.challenge-stats{text-align:center;padding:10px 12px;background:rgba(255,255,255,.15);border-radius:20px;margin:10px auto;width:85%;max-width:280px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 4px 15px rgba(0,0,0,.1);transition:.3s;border:1px solid rgba(255,255,255,.2)}.challenge-stats p{color:rgba(255,255,255,.95);font-size:12px;margin-bottom:5px;letter-spacing:.5px}.challenge-amount{color:gold;font-size:28px;font-weight:700;margin:5px 0;text-shadow:0 2px 4px rgba(0,0,0,.2);background:linear-gradient(to right,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px}#tzjinzhuijia,.index_index_b{text-shadow:0 1px 2px rgba(0,0,0,.2)}.challenge-stats:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)}.back-to-top{position:fixed;right:15px;bottom:70px;width:40px;height:40px;background:#ff8c00;border-radius:50%;display:none;justify-content:center;align-items:center;z-index:99;box-shadow:0 2px 10px rgba(255,140,0,.3);cursor:pointer;transition:.3s}.back-to-top::before{content:'';width:12px;height:12px;border-left:3px solid #fff;border-top:3px solid #fff;transform:translateY(2px) rotate(45deg);display:block}.back-to-top:hover{background:orange;transform:translateY(-2px);box-shadow:0 4px 15px rgba(255,140,0,.4)}.back-to-top:active{transform:translateY(0);box-shadow:0 2px 8px rgba(255,140,0,.3)}/* 现代化动画效果 */
.index_index_b.breathe-animation {
animation: modernBreathe 2s ease-in-out infinite;
}
@keyframes modernBreathe {
0%, 100% {
transform: scale(1) translateY(0);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.15);
}
50% {
transform: scale(1.02) translateY(-1px);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
}
}
/* 脉冲动画 - 现代化版本 */
#timeclock {
animation: modernPulse 3s ease-in-out infinite;
}
@keyframes modernPulse {
0%, 100% {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
50% {
box-shadow:
0 12px 40px rgba(255, 149, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
}
/* 按钮状态样式 - 现代化设计 */
.index_index_b.ready-to-punch {
background: linear-gradient(135deg,
rgba(76, 175, 80, 0.4) 0%,
rgba(56, 142, 60, 0.3) 50%,
rgba(76, 175, 80, 0.4) 100%);
animation: successGlow 1.5s ease-in-out infinite alternate;
}
@keyframes successGlow {
0% {
box-shadow:
0 8px 32px rgba(76, 175, 80, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
100% {
box-shadow:
0 12px 40px rgba(76, 175, 80, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}.challenge-people{color:rgba(255,255,255,.95);font-size:12px;margin-top:5px;padding:4px 12px;background:rgba(255,255,255,.1);border-radius:15px;display:inline-block;letter-spacing:.5px}.blessing-text,.challenge-people span{color:gold;font-size:16px;font-weight:700}.challenge-people span{padding:0 3px;position:relative;display:inline-block}.blessing-text{text-shadow:0 2px 4px rgba(0,0,0,.3);pointer-events:none;z-index:99;animation:1.5s ease-out forwards blessingFloat;background:rgba(255,0,0,.1);padding:8px 15px;border-radius:20px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);white-space:nowrap}@keyframes blessingFloat{0%{transform:translate(-50%,0) scale(.5);opacity:0}20%{transform:translate(-50%,-20px) scale(1.2);opacity:1}80%{transform:translate(-50%,-50px) scale(1);opacity:1}100%{transform:translate(-50%,-80px) scale(.8);opacity:0}}.effects-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.red-packet-modal{top:50%;left:50%;transform:translate(-50%,-50%);width:280px;background:linear-gradient(180deg,#ff4242 0,red 100%);border-radius:12px;box-shadow:0 0 20px rgba(0,0,0,.3);padding:20px;color:#fff;z-index:999999}.red-packet-header{position:relative;padding-top:20px}.red-packet-avatar{width:60px;height:60px;border-radius:50%;border:2px solid gold;margin:0 auto 10px;overflow:hidden;background:#fff}.red-packet-avatar img{width:100%;height:100%;object-fit:cover}.red-packet-title{font-size:18px;font-weight:700;margin-bottom:5px;color:#ffe4b5}.red-packet-subtitle{font-size:14px;color:rgba(255,255,255,.8);margin-bottom:20px}.red-packet-amount{font-size:42px;font-weight:700;font-family:Arial;color:gold;text-shadow:0 2px 4px rgba(0,0,0,.2);margin:20px 0;animation:.5s ease-out amountPop}.red-packet-footer{font-size:12px;color:rgba(255,255,255,.7);margin-top:15px}.red-packet-close{position:absolute;top:10px;right:10px;width:24px;height:24px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.red-packet-close:after,.red-packet-close:before{content:'';position:absolute;width:12px;height:2px;background:#fff;transform:rotate(45deg)}.red-packet-close:after{transform:rotate(-45deg)}.red-packet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:999998}@keyframes amountPop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes modalShow{0%{transform:translate(-50%,-30%);opacity:0}100%{transform:translate(-50%,-50%);opacity:1}}