绘制抽奖转盘（CSS+JS）

绘制抽奖转盘

HTML部分
CSS部分
JS部分
最终效果

Hello！这里是万物之恋，今天来教大家用css+js来简单绘制一个抽奖轮盘（不可转动）

HTML部分

 <div class="box"><h1>幸运大转盘</h1><div class="giant-box"><div class="prize"><span class="prize-text">一等奖</span></div><div class="prize"><span class="prize-text">二等奖</span></div><div class="prize"><span class="prize-text">三等奖</span></div><div class="prize"><span class="prize-text">四等奖</span></div><div class="prize"><span class="prize-text">五等奖</span></div><div class="prize"><span class="prize-text">六等奖</span></div><div class="prize"><span class="prize-text">七等奖</span></div><div class="prize"><span class="prize-text">八等奖</span></div><div class="prize"><span class="prize-text">九等奖</span></div><div class="prize"><span class="prize-text">十等奖</span></div></div><button type="button" class="giantBtn"">开始抽奖</button></div>

CSS部分

 * {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;background-color: #55557f;}.box {width: 380px;height: 600px;margin-top: 50px;background-color: #aaaa7f;padding: 15px 20px;position: relative;}.box h1 {text-align: center;}.giant-box {width: 340px;height: 340px;margin-top: 50px;border-radius: 50%;background: #fff;text-align: center;position: relative;overflow: hidden;}.prize {position: absolute;top: 0px;left: 110px;padding-top: 5px;transform-origin: bottom center;border-top: 170px solid;border-left: 59px solid transparent;border-right: 59px solid transparent;/* 将所有的盒子绘制成倒三角形，并利用定位叠加在一起 */}.prize-text {position: absolute;top: -145px;left: -10px;font-size: 20px;/* 将盒子里的文字定位放好 */}.giantBtn {width: 80px;height: 80px;position: absolute;top: 234px;left: 150px;border-radius: 50%;border: none;outline: none;background-color: antiquewhite;cursor: pointer;}.giantBtn::after {content: '';border-width: 33px 22px;border-style: solid;border-color: transparent;border-bottom-color: antiquewhite;position: absolute;top: -52px;left: 18px;/* 利用伪类为按钮添加指针 */}

现在的样子

JS部分

 // 获取到所有的三角形盒子var prizes = document.querySelectorAll('.prize');// 通过循环遍历来将其旋转，并添加不同的背景色for (var i = 0; i < prizes.length; i++) {prizes[i].style.transform = `rotate(${i*36}deg)`;if (i % 2 == 0) {prizes[i].style.borderTopColor = "#cd9cf2";} else {prizes[i].style.borderTopColor = "#f6f3ff";}};

最终效果

谢谢大家的阅读，这里是万物之恋，我们下次再见了！

绘制抽奖转盘（CSS+JS）相关推荐

html页面转盘如何实现,原生(纯)js+html+css实现移动端抽奖转盘系统
这是我前个月使用纯javascript+html写出的一个抽奖转盘系统,按理来说,我应该在当时做完这个小系统,就应该立即写bike总结才对,但是本人之前没有在网上写博客的习惯,平时总结更加习惯写在纸上 ...
html+css+js实现带有转盘的抽奖小程序
html+css+js实现带有转盘的抽奖小程序简介:html+css+js实现带有转盘的抽奖小程序. 效果展示抽奖方式: 飞镖飞镖制作成飞机的模样,没人的号码用黄色标签做成云朵模样黏贴在背景板上 ...
html如何画出抽奖的转盘,css 如何“画”一个抽奖转盘
主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...
使用css实现一个抽奖转盘
使用html.css3.js绘制一个抽奖转盘 1.画一个圆形container 设置溢出内容隐藏,并且使其内部元素靠上半部分居中 <div class="container" ...
html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上效果基本是用CSS实现的,没有用图片,加一丢丢JS.不过没有考虑太多兼容性. 首先画一个转盘 & ...
微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 "CSS3"! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件, ...
微信大转盘 java_[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果
[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果 0 2014-03-19 02:00:24 上次发表了一篇微信抽奖转盘活动-效果源码分析最近想起了刚接到这个项目时第一时间脑 ...
用 CSS 实现一个抽奖转盘(附详细代码+思路)
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步作者:我不吃饼干呀 https://www.cnblogs.com/wenruo/p/9732704.html ...
用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
原标题:[项目实战]用CSS实现一个抽奖转盘(附详细代码+思路) 效果基本是用CSS实现的,没有用图片,加一丢丢JS. 完全没有考虑兼容性. 首先画一个转盘 < htmllang= " ...

绘制抽奖转盘（CSS+JS）

绘制抽奖转盘

HTML部分

CSS部分

JS部分

最终效果

绘制抽奖转盘（CSS+JS）相关推荐

最新文章

热门文章

绘制抽奖转盘 （CSS+JS）

绘制抽奖转盘

HTML部分

CSS部分

JS部分

最终效果

绘制抽奖转盘 （CSS+JS）相关推荐

最新文章

热门文章

绘制抽奖转盘（CSS+JS）

绘制抽奖转盘（CSS+JS）相关推荐