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

2024-06-29 10:44| 来源: 网络整理| 查看: 265

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

1.画一个圆形container

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

.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%;

.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.给转盘加上小彩灯

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

【本文地址】

公司简介

联系我们