该文本描述了一个简单的网页应用，用户点击按钮后会播放音效并生成一个随机分数，伴随有动画效果，如数字滚动、烟花、彩带和闪光等。使用了HTML、CSS和JavaScript来实现这些功能，提供了丰富的视觉和听觉体验。
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--gold: #ffd700;
--red: #ff0000;
}
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: 'Arial Black', sans-serif;
}
#luckyButton {
padding: 20px 40px;
font-size: 1.5em;
background: linear-gradient(45deg, #2c3e50, #3498db);
border: none;
border-radius: 30px;
color: white;
cursor: pointer;
transition: all 0.3s;
position: relative;
z-index: 100;
}
#luckyButton:hover {
transform: scale(1.1);
box-shadow: 0 0 30px #3498db;
}
.score-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8em;
color: var(--gold);
text-shadow: 0 0 30px var(--gold);
opacity: 0;
z-index: 1000;
}
.score-final {
animation: scorePop 0.5s ease-out forwards;
}
@keyframes scorePop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
70% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.firework {
position: absolute;
width: 10px;
height: 10px;
background: var(--gold);
border-radius: 50%;
animation: explode 1s forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(8); opacity: 0; }
}
.golden-light {
position: fixed;
width: 200vw;
height: 200vh;
background: radial-gradient(circle,
rgba(255,215,0,0.3) 0%,
transparent 60%
);
animation: lightPulse 1s forwards;
}
@keyframes lightPulse {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(3); opacity: 0; }
}
.confetti {
position: absolute;
width: 15px;
height: 15px;
background: linear-gradient(45deg, var(--gold), var(--red));
animation: confettiFall 2s ease-out forwards;
}
@keyframes confettiFall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sparkle {
position: absolute;
width: 8px;
height: 8px;
background: #fff;
animation: sparkle 0.8s linear forwards;
}
@keyframes sparkle {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(5); opacity: 0; }
}
</style>
</head>
<body>
<button id="luckyButton">试试手气</button>
<audio id="drumroll" src="https://actions.google.com/sounds/v1/crowds/drum_roll.ogg"></audio>
<audio id="fanfare" src="https://actions.google.com/sounds/v1/crowds/cheer.ogg"></audio>
<script>
const btn = document.getElementById('luckyButton');
const drumroll = document.getElementById('drumroll');
const fanfare = document.getElementById('fanfare');
btn.addEventListener('click', async () => {
btn.disabled = true;
// 播放倒计时音效
drumroll.play();
// 创建滚动数字
const scoreBox = createScoreBox();
// 生成目标分数
const target = Math.floor(Math.random() * 101);
// 数字滚动动画
await animateNumber(scoreBox, target);
// 触发最终特效
createFinalEffect(target);
// 重置按钮
setTimeout(() => {
btn.disabled = false;
}, 3000);
});
function createScoreBox() {
const div = document.createElement('div');
div.className = 'score-box';
document.body.appendChild(div);
return div;
}
function animateNumber(element, target) {
return new Promise(resolve => {
let current = 0;
const startTime = Date.now();
const duration = 2000;
const update = () => {
const progress = Math.min((Date.now() - startTime) / duration, 1);
// 加速滚动效果
current = Math.floor(easeOutQuad(progress) * target);
element.textContent = current;
element.style.opacity = progress * 0.8;
// 添加随机闪烁效果
if (Math.random() > 0.5) {
createRandomSpark();
}
if (progress < 1) {
requestAnimationFrame(update);
} else {
resolve();
}
}
requestAnimationFrame(update);
});
}
function createFinalEffect(score) {
// 停止倒计时音效
drumroll.pause();
// 播放欢呼音效
fanfare.play();
// 最终数字特效
const finalScore = document.querySelector('.score-box');
finalScore.classList.add('score-final');
finalScore.style.color = score > 50 ? '#ff0000' : '#00ff00';
// 全屏闪光
createGoldenLight();
// 大爆炸特效
createFireworkBurst();
// 彩带雨
createConfettiStorm();
// 自动清理
setTimeout(() => {
finalScore.remove();
}, 3000);
}
function createGoldenLight() {
const light = document.createElement('div');
light.className = 'golden-light';
document.body.appendChild(light);
setTimeout(() => light.remove(), 1000);
}
function createFireworkBurst() {
for(let i = 0; i < 30; i++) {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * 100 + '%';
firework.style.top = Math.random() * 100 + '%';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 1000);
}
}
function createConfettiStorm() {
for(let i = 0; i < 100; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.animationDelay = Math.random() * 0.5 + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 2000);
}
}
function createRandomSpark() {
const spark = document.createElement('div');
spark.className = 'sparkle';
spark.style.left = Math.random() * 100 + '%';
spark.style.top = Math.random() * 100 + '%';
document.body.appendChild(spark);
setTimeout(() => spark.remove(), 800);
}
function easeOutQuad(t) {
return t * (2 - t);
}
</script>
</body>
</html>