中秋博饼规则（纯js css）

好的，以下是一个简单的中秋博饼规则的实现示例：

HTML部分：

<div class="dice-container">
  <div class="dice"></div>
  <div class="dice-result"></div>
</div>
<button class="btn-roll">掷骰子</button>

CSS部分：

.dice-container {
  position: relative;
  width: 150px;
  height: 150px;
}

.dice {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background-image: url('dice.png'); /* 骰子图片 */
  background-size: cover;
}

.dice-result {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

JavaScript部分：

const diceEl = document.querySelector('.dice');
const resultEl = document.querySelector('.dice-result');
const rollBtn = document.querySelector('.btn-roll');

const diceFaces = [1, 2, 3, 4, 5, 6]; // 骰子的六个面

rollBtn.addEventListener('click', () => {
  // 随机生成一个骰子点数
  const diceNum = diceFaces[Math.floor(Math.random() * diceFaces.length)];
  diceEl.style.backgroundPosition = `-${(diceNum - 1) * 150}px 0`;
  resultEl.textContent = `点数是：${diceNum}`;

  // 根据点数判断中奖情况并弹出提示框
  switch(diceNum) {
    case 1:
      alert('恭喜您获得兔子奖！');
      break;
    case 2:
      alert('恭喜您获得石榴奖！');
      break;
    case 3:
      alert('恭喜您获得银饼奖！');
      break;
    case 4:
      alert('恭喜您获得金饼奖！');
      break;
    case 5:
      alert('恭喜您获得莲蓉奖！');
      break;
    case 6:
      alert('恭喜您获得状元奖！');
      break;
    default:
      break;
  }
});

这里使用了一个图片作为骰子的表示，根据掷骰子的结果来设置图片的背景位置，同时根据点数判断中奖情况并弹出提示框。