css3转盘抽奖

CSS3转盘抽奖是一种常见的网页动效，它的实现方式简单，效果醒目。下面将介绍如何使用CSS3制作一个转盘抽奖的效果。

.rotate {
  animation: rotation 6s ease-in-out infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-20deg);
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid #f08d2d;
  border-right: none;
  cursor: pointer;
}

上述代码中，使用了CSS3的关键帧动画，即@keyframes。通过定义起始状态和目标状态，实现了整个转盘的旋转效果。同时，为了让指针始终指向某个角度，使用了translate和rotate进行定位，并定义了样式。

通过结合HTML和JavaScript实现点击抽奖效果，即使整个转盘抽奖动效更加生动有趣。

var btn = document.getElementById('btn');

btn.onclick = function () {
  var num = Math.random() * 360;
  var result = document.getElementById('result');

  result.innerText = Math.floor(num);
  document.getElementById('outer').style.transformOrigin = 'center center';
  document.getElementById('outer').style.transform = 'rotate(' + num + 'deg)';
}

通过生成随机角度，再通过定义CSS样式，重新设置转盘的位置和角度即可实现点击抽奖效果。这样，我们就能够玩转这个简单有趣的CSS3转盘抽奖了。