©2020-2024 ioDraw All rights reserved
使用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; } }