仿淘宝彩票换一注动画特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148900459

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿淘宝彩票换一注动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
padding: 20px;
}

.lottery-container {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}

.lottery-title {
font-size: 18px;
color: #333;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

.lottery-balls {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}

.ball {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ff4e4e;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
font-weight: bold;
font-size: 18px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.ball.blue {
background-color: #4e8cff;
}

.change-btn {
display: block;
width: 100%;
padding: 12px;
background-color: #ff4e4e;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.change-btn:hover {
background-color: #ff3333;
}

.change-btn:active {
transform: translateY(1px);
}

.article-link {
display: block;
margin-top: 30px;
text-align: center;
color: #666;
font-size: 14px;
text-decoration: none;
}

.article-link:hover {
color: #ff4e4e;
}
</style>
</head>
<body>
<div class="lottery-container">
<h2 class="lottery-title">双色球随机一注</h2>
<div class="lottery-balls" id="lotteryBalls">
<div class="ball">03</div>
<div class="ball">12</div>
<div class="ball">18</div>
<div class="ball">22</div>
<div class="ball">27</div>
<div class="ball">30</div>
<div class="ball blue">09</div>
</div>
<button class="change-btn" id="changeBtn">换一注</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 生成随机数函数
function generateRandomNumbers(count, min, max) {
let numbers = [];
while(numbers.length < count) {
let num = Math.floor(Math.random() * (max - min + 1)) + min;
num = num < 10 ? '0' + num : num.toString();
if(numbers.indexOf(num) === -1) {
numbers.push(num);
}
}
return numbers.sort((a, b) => a - b);
}

// 换一注动画效果
$('#changeBtn').click(function() {
// 禁用按钮防止重复点击
$(this).prop('disabled', true).text('正在生成...');

// 获取所有球元素
let balls = $('#lotteryBalls .ball');

// 先执行抖动动画
balls.each(function(index) {
$(this).css('transform', 'translateY(0)');
let delay = index * 100;

// 抖动动画
$(this).delay(delay).animate({
'margin-top': '-10px'
}, 100, function() {
$(this).animate({
'margin-top': '5px'
}, 100, function() {
$(this).animate({
'margin-top': '0px'
}, 50);
});
});
});

// 生成新的随机号码
let redBalls = generateRandomNumbers(6, 1, 33);
let blueBall = generateRandomNumbers(1, 1, 16);

// 延迟后更新号码并执行下落动画
setTimeout(function() {
balls.each(function(index) {
let newNum = index < 6 ? redBalls[index] : blueBall[0];

// 先缩小隐藏
$(this).animate({
'opacity': 0,
'transform': 'scale(0.5)'
}, 200, function() {
// 更新号码
$(this).text(newNum);

// 放大显示
$(this).css({
'transform': 'scale(1.2)',
'opacity': 0
}).animate({
'opacity': 1,
'transform': 'scale(1)'
}, 300);
});
});

// 恢复按钮状态
$('#changeBtn').prop('disabled', false).text('换一注');
}, 800);
});
});
</script>
</body>
</html>