js类似于微信抽红包的抽奖特效

<div id="red-envelope">
  <div class="envelope"></div>
  <button id="open-btn">打开红包</button>
</div>

#red-envelope {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.envelope {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  transition: transform 0.5s ease-out;
}

.envelope.open {
  transform: translateY(-100%);
}

document.getElementById('open-btn').addEventListener('click', function() {
  const envelope = document.querySelector('.envelope');
  envelope.classList.add('open');

  setTimeout(() => {
    const amount = Math.floor(Math.random() * 100) + 1; // 随机生成1到100之间的金额
    alert(`恭喜你获得${amount}元！`);
    envelope.classList.remove('open');
  }, 500);
});