HTML实现转盘抽奖的简单通用模板
以下是一个HTML模板，用于创建一个简单的转盘抽奖效果。这个模板可以被嵌入到任何网页中，并提供基本的转盘抽奖功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转盘抽奖</title>
<style>
.lottery-container {
position: relative;
width: 300px;
height: 300px;
margin: auto;
}
.lottery-plate {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(to right, #99B898, #D7CE96);
animation: rotate 4s linear infinite;
}
.lottery-pointer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -75%);
width: 20px;
height: 100px;
background-color: #333;
border-radius: 10px;
transform-origin: center bottom;
animation: rotate-pointer 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate-pointer {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="lottery-container">
<div class="lottery-plate">
<div class="lottery-pointer"></div>
</div>
</div>
</body>
</html>这个模板使用了CSS动画来实现转盘和指针的旋转效果。你可以通过调整样式和动画的时长来自定义它们的外观和行为。这个模板是一个基本示例，可以根据实际需求进行扩展和定制。
评论已关闭