html实现酷炫的公司年会抽奖(附源码)

HTML本身主要用于构建网页结构，要实现酷炫的公司年会抽奖效果，通常需要结合CSS样式和JavaScript或者更现代的前端框架如Vue、React等。下面是一个简单的示例，我们将使用HTML、CSS和JavaScript创建一个基本的动态抽奖轮盘：

1. HTML结构:

<div id="lottery-wheel">
  <div class="wheel" id="roulette">
    <!-- 用数字代替奖品名称 -->
    <div class="section" data-prize="一等奖">1</div>
    <!-- 添加更多奖品... -->
  </div>
  <button onclick="startLottery()">开始抽奖</button>
  <p id="winner"></p>
</div>

2. CSS样式:

#roulette {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section {
  width: 80px;
  height: 80px;
  background-color: #ddd;
  border-radius: 50%;
  position: absolute;
  transition: transform 0.5s ease;
}

3. JavaScript (基本实现):

function startLottery() {
  const sections = document.querySelectorAll('.section');
  let targetIndex = Math.floor(Math.random() * sections.length);
  
  sections.forEach((section, index) => {
    if (index === targetIndex) {
      section.style.transform = 'rotate(90deg)';
    } else {
      section.style.transform = '';
    }
  });

  // 获取最终中奖者信息
  const winnerSection = sections[targetIndex];
  document.getElementById('winner').innerText = `恭喜您获得：${winnerSection.getAttribute('data-prize')}`;
}

这个例子只是一个基础版本，如果想要实现更复杂的动画、拖拽选择区域等功能，可能需要引入额外的库（如jQuery、Three.js等），或者使用更现代化的Web组件技术。