先看效果：
使用的是智狐超强模型，只有一个html网页，点击开始会有动画的选择动画。效果很不错，你可以更改成任意类似场景使用，如：抽奖等等。感兴趣的可以去搜索官网试试，也有免费模型。https://www.aifoxtech.com/?user_sn=83484116
代码解释
-
食品信息显示：每个食品项目都显示了相关的图标和名称。
-
选中状态：
-
选中时，食品会有缩放效果和边框颜色变化，边框在选中状态下变为绿色。
-
-
动画效果：在选择过程中，食品图标的缩放效果和边框更改都有平滑的过渡效果。
-
选择次数：达到20次后，选中的食品名称会在下方显示。
使用方法
-
将上面的代码替换到你的index.html 文件中。
-
保存文件并使用浏览器打开。点击“开始选择”按钮，你会看到食品项以动画效果随机变化，最终展示选中的食品名称。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态食品选择器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}
.container {
text-align: center;
}
.food-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 20px 0;
}
.food-item {
margin: 15px;
font-size: 80px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.2s ease, border 0.2s ease;
border: 2px solid transparent; /* 默认边框透明 */
padding: 10px;
border-radius: 10px;
}
.food-item.selected {
transform: scale(1.1);
border: 2px solid #4CAF50; /* 选中状态边框颜色 */
}
button {
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
}
button:hover {
background-color: #45a049;
transform: scale(1.05);
}
#selected-food {
font-size: 24px;
margin-top: 20px;
color: #4CAF50;
}
</style>
</head>
<body>
<div>
<h1>食品选择器</h1>
<div id="food-list">
<div data-name="汉堡">🍔 汉堡</div>
<div data-name="比萨">🍕 比萨</div>
<div data-name="寿司">🍣 寿司</div>
<div data-name="冰淇淋">🍦 冰淇淋</div>
<div data-name="热狗">🌭 热狗</div>
<div data-name="墨西哥卷">🌮 墨西哥卷</div>
<div data-name="甜甜圈">🍩 甜甜圈</div>
<div data-name="饼干">🍪 饼干</div>
<div data-name="沙拉">🥗 沙拉</div>
<div data-name="卷饼">🥙 卷饼</div>
</div>
<button id="start-button">开始选择</button>
<div id="selected-food">选择的食品: <span id="food-result"></span></div>
</div>
<script>
const foodItems = document.querySelectorAll('.food-item');
let interval;
document.getElementById('start-button').addEventListener('click', startSelection);
function startSelection() {
clearInterval(interval);
let counter = 0;
foodItems.forEach(item => item.classList.remove('selected')); // 清除选中状态
interval = setInterval(() => {
// 随机选择食品
const randomIndex = Math.floor(Math.random() * foodItems.length);
foodItems.forEach(item => item.classList.remove('selected')); // 清除选中状态
foodItems[randomIndex].classList.add('selected'); // 添加选中状态
// 动画效果
foodItems[randomIndex].style.transition = 'transform 0.2s ease, border 0.2s ease';
foodItems[randomIndex].style.transform = 'scale(1.1)';
setTimeout(() => {
foodItems[randomIndex].style.transform = 'scale(1)';
}, 200);
counter++;
// 当达到一定次数后，停止选择
if (counter >= 20) {
clearInterval(interval);
// 选择最终食品
const selectedFoodItem = foodItems[randomIndex];
document.getElementById('food-result').textContent = selectedFoodItem.dataset.name;
}
}, 200); // 每200毫秒更新一次
}
</script>
</body>
</html>
