Use css to implement a lottery carousel

Use html, css3, js to draw a lottery turntable

1. Draw a circular container

Set the overflow content to hide and center the inner elements on the upper half

<div class="container">

</div>

.container{
   position: relative;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: #f7c894;
   display: flex;
   justify-content: center;
   overflow: hidden;
   border: 20px solid #ffbd72;
}

2. We add a fan-shaped element with a width temporarily set to 100px

Use the polygon method clip-path: polygon() in the css attribute of the clipping path to draw this fan-shaped part

Change the center point for rotation transform-origin: 50% 100%;

 

<div class="container">
   <div class="content">
       <div class="fan-blade"></div>
   </div>
</div>

.content{
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   border-radius: 50%;
   overflow: hidden;
}
.fan-blade{
   position: absolute;
   width: 100px;
   height: 50%;
   clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
   -webkit-clip-path: -webkit-polygon(50% 100%, 0% 0%, 100% 0%);
   transform-origin: 50% 100%;
}

3. We will make 8 copies of the fan, each rotated 45deg in turn, and use different background colors for the odd-numbered sub-elements and even-numbered sub-elements 

.container .fan-blade:nth-child(1){
            transform: rotateZ(45deg);
        }
        .container .fan-blade:nth-child(2){
            transform: rotateZ(90deg);
        }
        .container .fan-blade:nth-child(3){
            transform: rotateZ(135deg);
        }
        .container .fan-blade:nth-child(4){
            transform: rotateZ(180deg);
        }
        .container .fan-blade:nth-child(5){
            transform: rotateZ(225deg);
        }
        .container .fan-blade:nth-child(6){
            transform: rotateZ(270deg);
        }
        .container .fan-blade:nth-child(7){
            transform: rotateZ(315deg);
        }
        .container .fan-blade:nth-child(8){
            transform: rotateZ(360deg);
        }

        .container .fan-blade:nth-child(odd){
            background-color: #f7c894;
        }
        .container .fan-blade:nth-child(even){
            background-color: #ffebd4;
        }

 4. At this time, there is still a lot of space between the fan shapes. We use js to calculate the correct width and set the width to the corresponding fan element

//设置一个选择器
let $ = function(selector){return document.querySelectorAll(selector)}

let num = 8             //个数
let diameter = 300      //转盘直径

let width = 0           //扇叶元素宽度
let deg = 360 / num     //每一叶的旋转角度

width = diameter * Math.tan((deg/2) * Math.PI/180)

$('.fan-blade').forEach(e=>{
    e.style.width = width + 'px'
})

 5. Add small colored lights to the turntable

<div class="lights-content">
    <div class="lights"><div class="light"></div></div>
    <div class="lights"><div class="light"></div></div>
    <div class="lights"><div class="light"></div></div>
    <div class="lights"><div class="light"></div></div>
    <div class="lights"><div class="light"></div></div>
    <div class="lights"><div class="light"></div></div>
    <div class="lights"><div class="light"></div></div>
    <div class="lights"><div class="light"></div></div>
</div>

 

.lights-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    border-radius: 50%;
}
.lights{
    position: absolute;
    width: 16px;
    height: 50%;
    transform-origin: 50% 100%;
}
.light{
    position: absolute;
    top: -16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    
}
    
.lights-content .lights:nth-child(1){
    transform: rotateZ(45deg);
}
.lights-content .lights:nth-child(2){
    transform: rotateZ(90deg);
}
.lights-content .lights:nth-child(3){
    transform: rotateZ(135deg);
}
.lights-content .lights:nth-child(4){
    transform: rotateZ(180deg);
}
.lights-content .lights:nth-child(5){
    transform: rotateZ(225deg);
}
.lights-content .lights:nth-child(6){
    transform: rotateZ(270deg);
}
.lights-content .lights:nth-child(7){
    transform: rotateZ(315deg);
}
.lights-content .lights:nth-child(8){
    transform: rotateZ(360deg);
}

.lights-content .lights:nth-child(odd) .light{
    box-shadow: 0 0 7.5px #ff0200;
	background-color: #ff0200;
	animation: lottery_light1 0.75s ease-in-out infinite;
}
.lights-content .lights:nth-child(even) .light{
    box-shadow: 0 0 7.5px #ffffff;
	background-color: #ffffff;
	animation: lottery_light2 0.75s ease-in-out infinite;
}

@keyframes lottery_light1 {
	0%{
		box-shadow: 0 0 7.5px #ff0200;
		background-color: #ff0200;
	}
	10%{
		box-shadow: 0 0 7.5px #ff0200;
		background-color: #ff0200;
	}
	40%{
		box-shadow: 0 0 7.5px #ffffff;
		background-color: #ffffff;
	}
	60%{
		box-shadow: 0 0 7.5px #ffffff;
		background-color: #ffffff;
	}
	90%{
		box-shadow: 0 0 7.5px #ff0200;
		background-color: #ff0200;
	}
	100%{
		box-shadow: 0 0 7.5px #ff0200;
		background-color: #ff0200;
	}
}

@keyframes lottery_light2 {
	0%{
		box-shadow: 0 0 7.5px #ffffff;
		background-color: #ffffff;
	}
	10%{
		box-shadow: 0 0 7.5px #ffffff;
		background-color: #ffffff;
	}
	40%{
		box-shadow: 0 0 7.5px #ff0200;
		background-color: #ff0200;
	}
	60%{
		box-shadow: 0 0 7.5px #ff0200;
		background-color: #ff0200;
	}
	90%{
		box-shadow: 0 0 7.5px #ffffff;
		background-color: #ffffff;
	}
	100%{
		box-shadow: 0 0 7.5px #ffffff;
		background-color: #ffffff;
	}
}