CSS实现抽奖大转盘

1.转盘效果：

2.代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>幸运大转盘</title><style>* {/* 重置默认样式 */margin: 0;padding: 0;border: none;outline: none;user-select: none;}.cjbg {background-image: url(bg.jpeg);background-repeat: no-repeat;background-size: 100% 100%;/* padding: 80% 0 0; */position: relative;min-width: 1200px;min-height: 2000px;}.cj-box {position: absolute;top: 15%;width: 100%;}.wrapper {position: relative;height: 400px;width: 400px;padding: 40px;margin: 0 auto;background-color: #febe11;box-shadow: #000000 0px 0px 10px;border-radius: 50%;}.light {position: absolute;height: 20px;width: 20px;border-radius: 50%;top: 9px;left: 230px;transform-origin: 10px 230px;}.light-twinkling {animation: 1s twinkling 3, 100ms 3s twinkling 3;}.light:nth-child(2n) {background-color: #fffffe;}.light:nth-child(2n+1) {background-color: #ff0500;}.light:nth-child(2) {transform: rotate(36deg);}.light:nth-child(3) {transform: rotate(72deg);}.light:nth-child(4) {transform: rotate(108deg);}.light:nth-child(5) {transform: rotate(144deg);}.light:nth-child(6) {transform: rotate(180deg);}.light:nth-child(7) {transform: rotate(216deg);}.light:nth-child(8) {transform: rotate(252deg);}.light:nth-child(9) {transform: rotate(288deg);}.light:nth-child(10) {transform: rotate(324deg);}.panel {position: relative;height: 400px;width: 400px;background-color: #b7b7b7;border-radius: 200px;}.sector {position: absolute;left: 200px;top: 0px;width: 200px;height: 400px;font-size: 14px;border-radius: 0px 100px 100px 0;overflow: hidden;transform-origin: left center;}.sector:nth-child(1) {transform: rotate(-18deg);}.sector:nth-child(2) {transform: rotate(18deg);}.sector:nth-child(3) {transform: rotate(54deg);}.sector:nth-child(4) {transform: rotate(90deg);}.sector:nth-child(5) {transform: rotate(126deg);}.sector:nth-child(6) {transform: rotate(162deg);}.sector:nth-child(7) {transform: rotate(198deg);}.sector:nth-child(8) {transform: rotate(234deg);}.sector:nth-child(9) {transform: rotate(270deg);}.sector:nth-child(10) {transform: rotate(306deg);}.sector:nth-child(2n+1) .sector-inner {background: #fef6e0;}.sector:nth-child(2n) .sector-inner {background: #ffffff;}.sector-inner {text-align: center;display: block;width: 110px;padding: 5px 3px 0 87px;height: 395px;transform: translateX(-200px) rotate(36deg);transform-origin: right center;border-radius: 200px 0 0 200px;}.sector-inner span {display: block;transform-origin: center;transform: rotate(-19deg);color: #d46854;font-size: 22px;height: 40px;line-height: 22px;margin: 21px 0 0 48px;width: 22px;}.pointer {position: absolute;left: 162px;top: 158px;z-index: 10;height: 60px;width: 60px;padding: 6px;color: #fff899;line-height: 28px;font-size: 22px;text-align: center;background-color: #ff5350;border-radius: 50%;border: 1px solid #ff5350;transition: transform 3s cubic-bezier(.2, .93, .43, 1);}.pointer::after {content: '';position: absolute;left: 24px;top: -47px;border-width: 24px 12px;border-style: solid;border-color: transparent;border-bottom-color: #ff5350;transform-origin: center;}.result {margin: 20px 60px;text-align: center;color: yellow;font-size: 22px;}@keyframes twinkling {50% {background: transparent;}}</style>
</head><body><div class="cjbg"><div class="cj-box"><div class="wrapper"><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="panel"><div class="sector"><div class="sector-inner"><span>8元红包</span></div></div><div class="sector"><div class="sector-inner"><span>5元红包</span></div></div><div class="sector"><div class="sector-inner"><span>3元红包</span></div></div><div class="sector"><div class="sector-inner"><span>卫莱士净水机</span></div></div><div class="sector"><div class="sector-inner"><span>香皂一块</span></div></div><div class="sector"><div class="sector-inner"><span>抽纸一盒</span></div></div><div class="sector"><div class="sector-inner"><span>乳胶凉席</span></div></div><div class="sector"><div class="sector-inner"><span>3元红包</span></div></div><div class="sector"><div class="sector-inner"><span>飘影洗护套装</span></div></div><div class="sector"><div class="sector-inner"><span>10元红包</span></div></div><div class="pointer">开始抽奖</div></div></div><div class="result"></div></div></div><script>let getEle = document.getElementsByClassName.bind(document);let pointer = getEle('pointer')[0];let result = getEle('result')[0];let lights = Array.prototype.slice.call(getEle('light'));let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了let reward = ['8元红包', '5元红包', '3元红包', '卫莱士净水机', '香皂一块','抽纸一盒', '乳胶凉席', '3元红包', '飘影洗护套装', '10元红包'];// 根据随机角度获取奖励let getReward = (function () {currentDeg = 0;return function () {// 转三圈到四圈let rotateDeg = Math.random() * 360 + 3600console.log(rotateDeg, 'rotateDeg')currentDeg += rotateDeg;console.log(currentDeg, 'currentDeg')let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]console.log(rewardText, 'rewardText')return {deg: currentDeg,text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText}}})();pointer.addEventListener('click', () => {if (onRotation) return;console.log('开始抽奖');onRotation = true;lights.forEach(light => { light.className += ' light-twinkling'; });let nextStatus = getReward();console.log(nextStatus)result.innerText = nextStatus.text;result.style.display = 'none';pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;})pointer.addEventListener('transitionend', () => {console.log('抽奖结束');setTimeout(() => { // 等闪烁三下结束onRotation = false;lights.forEach(light => { light.className = 'light'; });result.style.display = 'block';}, 300);})</script>
</body></html>

CSS实现抽奖大转盘相关推荐

css3抽奖转盘,从零制作CSS3抽奖大转盘
今天的任务是做一个纯CSS3的还算比较漂亮的抽奖大转盘,也就是下图效果. 我只说思路和重要的CSS3代码. Paste_Image.png 外盘外盘是指有彩灯的深橙色圆环,以及圆环的外边线. 外盘设 ...
javaScript实现抽奖大转盘（一）
今天试了试自己写个抽奖大转盘. 先是借了两张别人的图片: 下面是布局部分: <div class="round"><div class="box&quo ...
vue幸运抽奖大转盘的丑绝实现
自己通过canvas+vue(vue不是必备的可以)实现的一个抽奖转盘,重点在实现逻辑,所以样式丑绝. 基本效果图,中间指针可以替换为图片数据格式转盘的分块由传入的数组长度确定,分为4,6,8块还 ...
用c语言写抽奖大转盘,iOS抽奖大转盘的二种实现方法
有个朋友需要写个抽奖大转盘的功能,就让我帮忙写了下.我用了2种方法实现了效果,在这里和大家一起分享下. 一.一键转动大转盘我一开始拿到手的是一堆的图片,然后自己花了点时间,搭建出美工要求的UI,接下 ...
微信小程序独家秘笈之抽奖大转盘
代码地址如下: http://www.demodashi.com/demo/14209.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
抽奖大转盘-React-移动端
抽奖大转盘-React-移动端 react安装修改项目结构配置路由删除一些不必要的文件大转盘整理代码结构和一些静态资源书写静态页面移动端px-rem转换静态页面静态页面样式抽奖大转 ...
优秀课程案例：使用Scratch制作一个抽奖大转盘方法二！
点击上面微信号关注我关注我哟每天坚持早上9:00左右推送文章,争取做到日更,喜欢的可以设置星标,并分享点赞我们的文章,非常感谢大家的支持,您的点击的在看就是我们的动力! 昨天我们分享了一个抽奖大转盘: ...
Redis 抽奖大转盘的实战示例
本文主要介绍了Redis 抽奖大转盘的实战示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.编程学习资料点击领取目录 1. 项目介绍 2. 项目演示 3. 表结 ...
jQuery实现简单抽奖大转盘
上效果!!! 初始页面效果点击开始后效果上代码 <!DOCTYPE html> <html lang="en"> <head><met ...

CSS实现抽奖大转盘

1.转盘效果：

2.代码：

CSS实现抽奖大转盘相关推荐

最新文章

热门文章