[html]使用css绘制一个抽奖转盘

使用html、css3、js绘制一个抽奖转盘

 

1.画一个圆形container

设置溢出内容隐藏，并且使其内部元素靠上半部分居中

<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.我们添加一个扇形元素 宽度 暂时设为100px

使用剪切路径的css属性中的多边形方法 clip-path: polygon() 来画这个扇形部分

改变旋转用的中心点 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.我们将扇形复制8份，每个依次旋转45deg，并且单数子元素和双数子元素使用不同的背景颜色

.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.这时扇形之间还有很大的空间，我们使用js来计算正确的宽度应该是多少，并把宽度设置到对应的扇形元素上

//设置一个选择器
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.给转盘加上小彩灯

<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;
	}
}