HTML5大轉盤抽獎代碼是現在非常流行的一種抽獎方式，在很多網站和APP中都可以看到。下面是一個簡單的HTML5大轉盤抽獎代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5大轉盤抽獎代碼</title>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
}
#wheel {
width: 400px;
height: 400px;
background-image: url('wheel.png');
background-size: 100% 100%;
position: absolute;
}
#arrow {
width: 80px;
height: 80px;
background-image: url('arrow.png');
background-size: 100% 100%;
position: absolute;
left: 160px;
top: 160px;
transform-origin: 40px 40px;
}
</style>
</head>
<body>
<div id="container">
<div id="wheel"></div>
<div id="arrow"></div>
</div>
<script>
var items = [
"一等獎",
"二等獎",
"三等獎",
"四等獎",
"五等獎",
"六等獎",
"七等獎",
"八等獎"
];
var angles = [
0,
45,
90,
135,
180,
225,
270,
315
];
var index = Math.floor(Math.random() * items.length);
var angle = angles[index];
var rotations = angle + 3600;
var duration = 5000;
var timingFunction = "ease-out";
var wheel = document.getElementById("wheel");
var arrow = document.getElementById("arrow");
arrow.style.transform = "rotate(" + angle + "deg)";
var animation = wheel.animate([
{ transform: "rotate(0deg)" },
{ transform: "rotate(" + rotations + "deg)" }
], {
duration: duration,
easing: timingFunction,
fill: "forwards"
});
animation.onfinish = function() {
alert(items[index]);
};
</script>
</body>
</html>在上面的代碼中，我們使用了HTML5的一些新特性，如動畫API（Web Animations API）、Canvas、Transforms等，以實現旋轉大轉盤、指針指向隨機獎品、動態抽獎的效果。代碼中包含了HTML、CSS和JavaScript三個部分，需要依次編寫并保存在同一HTML文件中。