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

使用css实现一个抽奖转盘相关推荐

用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
原标题:[项目实战]用CSS实现一个抽奖转盘(附详细代码+思路) 效果基本是用CSS实现的,没有用图片,加一丢丢JS. 完全没有考虑兼容性. 首先画一个转盘 < htmllang= " ...
html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上效果基本是用CSS实现的,没有用图片,加一丢丢JS.不过没有考虑太多兼容性. 首先画一个转盘 & ...
用 CSS 实现一个抽奖转盘(附详细代码+思路)
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步作者:我不吃饼干呀 https://www.cnblogs.com/wenruo/p/9732704.html ...
用CSS实现一个抽奖转盘(附详细代码+思路)
作者:我不吃饼干呀 https://www.cnblogs.com/wenruo/p/9732704.html 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘 & ...
html如何画出抽奖的转盘,css 如何“画”一个抽奖转盘
主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...
抽奖动画效果html,利用css实现一个抽奖动画效果
首先我们先来看下最终的运行效果: 从效果图我们可以看到,抽奖会自动进行,并显示中奖信息. 这个效果基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 具体步骤如下: 首先画一个转盘 ...
html css年会照片抽奖,利用css实现一个抽奖动画效果
首先我们先来看下最终的运行效果: 从效果图我们可以看到,抽奖会自动进行,并显示中奖信息. 这个效果基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 具体步骤如下: 首先画一个转盘 ...
如何用python画转盘_如何用ppt做一个抽奖转盘看完你学会了么
现在抽奖转盘是很常见的,有时候公司办活动也会有抽奖活动,如果让自己做一个抽奖转盘,应该怎么做? 操作方法 01 打开ppt,把幻灯片版式设置成空白的,然后点击插入,选择图表. 02 选择饼图,用第一种 ...
【JavaScript】制作一个抽奖转盘页面
开发H5项目,有时会遇到一个需求,需要制作抽奖转盘的网页,这个实现步骤,如果拿现成的改来做是容易的,但是想着全靠自己做是不容易的,下面会讲,全靠自己做,能掌握到吗目录一览 1.设计网页 2. 编写脚 ...

使用css实现一个抽奖转盘

使用css实现一个抽奖转盘相关推荐

最新文章

热门文章