布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转盘点名游戏</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul id="man">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button id="btnYes">开始</button>
<img id="img1" src="img/timg.png" alt="">
<img id="img2" src="img/1.png" alt="">
</body>
</html>
<script src="index.js">
</script>
css样式
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(to bottom, #171717, #494e73, #4e7290, #262f46);
}
#man {
width: 1000px;
height: 1000px;
list-style: none;
border-radius: 50%;
background: radial-gradient(#17aacf, #1de749, #bfff0e);
position: absolute;
top: -150px;
left: -300px;
box-shadow: 0px 0px 20px indigo;
}
#man li {
position: absolute;
width: 120px;
height: 30px;
top: 50%;
left: 50%;
font-size: 16px;
transform-origin: left top;
text-align: center;
}
#btnYes {
position: absolute;
display: block;
right: 25%;
top: 340px;
width: 100px;
height: 100px;
background-color: rgb(0, 255, 213);
text-align: center;
border: none;
outline: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 2px 2px 5px black;
}
#img1 {
position: absolute;
width: 360px;
height: 40px;
top: 345px;
left: 220px;
}
#img2 {
position: absolute;
width: 150px;
height: 150px;
left: 140px;
margin-top: 18%;
border-radius: 50%;
animation: img3move 1s infinite linear;
transform-origin: center center;
}
@keyframes img3move {
0% {
top: 50px;
width: 150px;
}
25% {
top: 70px;
width: 170px;
}
50% {
top: 90px;
width: 190px;
box-shadow: 0px 10px 10px black;
}
75% {
top: 70px;
width: 170px;
}
100% {
top: 50px;
width: 150px;
}
}
js
var oliList = document.getElementsByTagName("li");
var oman = document.getElementById("man");
var obtnYes = document.getElementById("btnYes");
var oUl = document.getElementById("vip");
var names = ["王志闯", "吕振杰", "李浩宇",
"李宗洋", "李锦鸣", "王源林",
"王振宇", "周凯", "常子健",
"陈亚曼", "崔梦玉", "高秀芳",
"谷俊磊", "李绪", "李正杨", "刘艳芳",
"邱晓宇", "沈向阳", "孙奥权",
"王雯玄", "王振华", "魏亓棣",
"郗燕栋", "张泽同", "葛媛媛",
"郝庆威", "岳秀鑫", "张宇航",
"王志闯", "吕振杰", "李浩宇",
"李宗洋", "李锦鸣", "王源林",
"王振宇", "周凯", "常子健",
"陈亚曼", "崔梦玉", "高秀芳",
"谷俊磊", "李绪", "李正杨", "刘艳芳",
"邱晓宇", "沈向阳", "孙奥权",
"王雯玄", "王振华", "魏亓棣",
"郗燕栋", "张泽同", "葛媛媛",
"郝庆威", "岳秀鑫", "张宇航",
];
var t = 0;
function place() {
for (var i = 0; i < 56; i++) {
t = i * (360 / 56) + "deg";
oliList[i].innerHTML = names[i];
oliList[i].style.transform = "rotate(" + t + ") translate(360px)";
var oSpan = document.createElement("span");
oSpan.innerHTML = " 幸运星!";
oSpan.style.color = "#ac112c"
oSpan.style.cursor = "pointer";
oSpan.style.textAlign = "lift";
oliList[i].appendChild(oSpan);
}
}
place();
function fun() {
var num = Math.round((Math.random() * 56));
return num * (360 / 56) + 180;
}
var myDeg = 0;
obtnYes.onmousedown = function() {
myDeg = myDeg + fun();
oman.style.transitionDuration = "3s";
obtnYes.style.boxShadow = "none";
console.log(myDeg);
oman.style.transform = "rotateZ(" + myDeg + "deg)";
}
obtnYes.onclick = function() {
btnYes.style.boxShadow = "2px 2px 5px black";
}