效果图
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.lottery {
position: relative;
width: 400px;
height: 400px;
border-radius:50%;
background: #B7E4F9;
}
.dot {
position: absolute;
left: 50%;
top:50%;
width: 20px;
height: 20px;
margin-left:-10px;
margin-top: -10px;
border-radius: 50%;
background: #FFEC7E;
}
.glitter {
background: #fff;
}
</style>
<body>
<script>
(function(){
var body = document.body
var divLottery = document.createElement('div');
var counter = 0;
divLottery.className = "lottery";
createDot(12);
body.appendChild(divLottery);
//创建小圆点
function createDot(n){
if(n%2!==0) throw new Error("n必须是正偶数")
for(var i=0;i<n;i++){
var span = document.createElement('span');
span.className = 'dot '+ 'dot'+i;
span.style.transform = `rotate(${360/n*i}deg) translateY(-170px)`;
divLottery.appendChild(span);
}
}
//小圆点闪烁
function glitter(n){
var even = document.querySelectorAll(`.dot:nth-child(2n)`);
var odd = document.querySelectorAll(`.dot:nth-child(2n+1)`);
if(n%2==0){
even.forEach(function(val){
val.classList.add('glitter');
})
odd.forEach(function(val){
val.classList.remove('glitter');
})
}else{
odd.forEach(function(val){
val.classList.add('glitter');
})
even.forEach(function(val){
val.classList.remove('glitter');
})
}
}
setInterval(function () {
glitter(counter);
counter++;
}, 500);
})()
</script>
</body>
</html>