©2020-2024 ioDraw All rights reserved
use html,css3,js Draw a lottery turntable
1. Draw a circle container
Set overflow hide , And center the upper half of its internal elements
<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 element width Temporarily set to 100px
Using cut path css Polygon methods in attributes clip-path: polygon() To draw this sector
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 replicate the sector 8 share , Rotate each in turn 45deg, And the singular and even sub elements use different background colors
.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. There is still a lot of space between the sectors , We use js To calculate the correct width , And set the width to the corresponding sector element
// Set a selector let $ = function(selector){return
document.querySelectorAll(selector)} let num = 8 // number let diameter = 300 // Diameter of rotary table
let width = 0 // Blade element width let deg = 360 / num // Rotation angle of each leaf 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; } }
Technology