用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...

最新推荐文章于 2024-05-08 15:40:33 发布
最新推荐文章于 2024-05-08 15:40:33 发布
阅读量6.1k 收藏 35
点赞数 7
文章标签： 用html实现抽奖大转盘

原标题：【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)

效果

f51c6bde462e2ceef04853b66aa64f24.gif

基本是用CSS实现的，没有用图片，加一丢丢JS。 完全没有考虑兼容性。

首先画一个转盘

< htmllang= "en">

< head>

< metacharset= "UTF-8">

< title>幸运大转盘 title>

< style>

/* 重置默认样式 */

* {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.wrapper{

position: relative;

height: 200px;

width: 200px;

padding: 20px;

margin: 20px;

background-color: #c0381f;

box-shadow: #0000000px0px10px;

border-radius: 50%;

}

.panel{

position: relative;

height: 200px;

width: 200px;

background-color: #b7b7b7;

border-radius: 100px;

}

.pointer{

position: absolute;

left: 79px;

top: 79px;

z-index: 10;

height: 30px;

width: 30px;

padding: 6px;

color: #fff899;

line-height: 15px;

font-size: 12px;

text-align: center;

background-color: #dc5b5b;

border-radius: 50%;

border: 1pxsolid #c0381f;

}

style>

head>

< body>

< divclass= "wrapper">

< divclass= "panel">

< divclass= "pointer">开始抽奖 div>

div>

div>

body>

html>

效果如下，配色什么的不要在意，可能比较丑。。。

21225ef5e8cbde2446208b89e2d23e64.png

然后写抽奖指针的小箭头，用CSS画三角形是一个比较常见的问题，通过设置width和height为0，然后用border实现。

be9789601264b45932e96871194dc2db.png

如图，矩形是由四个三角形边框组成的，只要设置其它边颜色为透明，就可以获得单独的三角形。

这里通过伪元素after实现三角形，并通过绝对定位将三角形定位到中间小圆的顶端。

.pointer::after{

content: '';

position: absolute;

left: 14px;

top: - 24px;

border-width: 12px6px;

border-style: solid;

border-color: transparent;

border-bottom-color: #c0381f;

}

现在才像一个指针了。

7e0fb180084ef257f9ba0e7321337738.png

哦 接下来是实现转盘背景，不同的扇区对应不同的奖品，这样就有一个需求：实现任意角度扇形。

可能会想当然的认为和三角形一样，不过是加一个border-radius而已，高度是圆半径，宽度是tan(θ/2)，但是实现出来的效果和想象并不一样……(可能需要做一些其他操作以达到效果，但是我没想到。

最后还是求助了搜索引擎。不得不承认dalao们实在是太nb了，qaq……通过 linear-gradient 实现想法是真的棒。不过还有好多复杂的实现看的不是很懂= =

How to draw a circle sector in CSS?

Segments in a circle using CSS3

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

实现就是通过两个正方形取相交区域。

e094b5a01f5ccaf1d3b4f972bb855fec.png

我觉图画的还是挺好的:D

没有用伪元素实现，因为我还要加文字，至于文字的位置，我真的是瞎调的，反正正经写代码也不会这么写= =

< htmllang= "en">

< head>

< metacharset= "UTF-8">

< title>Document title>

< style>

.sector{

position: absolute;

width: 100px;

height: 200px;

margin: 100px;

border-radius: 0px100px100px0;

overflow: hidden;

transform: rotate(-18deg);

}

.sector-inner{

text-align: center;

display: block;

width: 40px;

padding: 5px3px057px;

height: 195px;

background: #ffeab1;

transform: translateX(-100px) rotate(36deg);

transform-origin: right center;

border-radius: 100px00100px;

}

.sector-innerspan{

display: block;

transform-origin: center;

transform: rotate(-19deg);

color: #d46854;

}

style>

head>

< body>

< divclass= "sector">

< divclass= "sector-inner">

< span>谢谢参与 span>

div>

div>

body>

html>

效果如下，一个带有文字的小扇形~~

ab9a1d9665c302321c5879aa22901a8f.png

OK，现在写一堆扇形放到一开始的转盘上。

现在的代码是酱紫滴~~太长了折起来。

View Code

7cd364f7f884ea91642c4c4c54b9f23e.png

嘻嘻，现在是抽奖转盘的样子了吧~~~

最后再加点浮夸的灯。

View Code

86f590c379958ccca3bac6224db82a65.png

现在转盘CSS部分基本完成。简单写一下JS部分。点击中间的指针时，指针会转，可以拉一条贝塞尔曲线，控制动画的速度。

贝塞尔曲线可以简单的看作是时间-距离曲线，斜率就是速度。因为转盘的速度肯定是先快后慢，随便拉一条。

http://cubic-bezier.com/#.2,.93,.43,1

9c1fcbea18238b6f049e5bc130e006d3.png

CSS中添加属性

.pointer {

// ...

transition: transform 3scubic-bezier( .2, .93, .43, 1);

}

点击开始抽奖的时候，为中间的指针加一个旋转的角度。这里有一个问题就是不同的扇区抽到的概率是相同的，改成不同应该…也蛮简单的，不过主要是想练下CSS，JS就随便写了。

JS部分代码。。

letgetEle = document.getElementsByClassName.bind( document);

letpointer = getEle( 'pointer')[ 0];

letresult = getEle( 'result')[ 0];

letonRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了letreward = [ '谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分','谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];

// 根据随机角度获取奖励letgetReward = ( function( ){currentDeg = 0;returnfunction( ){// 转三圈到四圈letrotateDeg = Math.random * 360+ 1080;currentDeg += rotateDeg;letrewardText = reward[ Math.floor((currentDeg + 18) % 360/ 36)]return{deg: currentDeg,text: rewardText === '谢谢参与'? '很遗憾，您没有获得奖品。': '恭喜获得: '+ rewardText}}});

pointer.addEventListener( 'click', =>{if(onRotation) return;console.log( '开始抽奖');onRotation = true;letnextStatus = getReward;console.log(nextStatus)result.innerText = nextStatus.text;result.style.display = 'none';pointer.style.transform = `rotateZ( ${nextStatus.deg}deg)`;})pointer.addEventListener( 'transitionend', =>{console.log( '抽奖结束');onRotation = false;result.style.display = 'block';})

现在一个抽奖转盘基本完成了，最后一个需求，如果旁边的等能够亮起来就好了。

至于灯怎么亮，就需要用到CSS3的动画了，我还不太熟悉，先去学习一下>_<

我学完回来了，参考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，内容不是很多。

animation-name指定动画名称，

animation-duration指定动画持续时间，

animation-timing-function指定动画函数，和transition的函数是一样的，

animation-delay指定动画延迟多久后执行，

animation-iteration-count指定动画执行多少次，默认为一次，可以指定为infinite，无限循环。

animation-direction指定动画多次播放时，一次结束，下一次怎么接上一次，如图。

d0569d3f89ce0436d19e395216a798ce.png

animation-fill-mode指定动画结束后停在什么位置，默认回到起始状态，forwards表示让动画停留在结束状态，backwards让动画回到第一帧的状态，both根据animation-direction轮流应用forwards和backwards规则。

animation-play-state动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。

使用关键字 keyframes来定义一个动画。通过百分比指定其中任意几个状态。

尝试着写一下=。=

< htmllang= "en">< head>< metacharset= "UTF-8">< title>Document title>< style>div{height: 30px;width: 30px;animation: 1stwinkling 3, 100ms3stwinkling 3;}@ keyframestwinkling {50% { background: red; }} style> head>< body>< div> div> body> html>

这是一个方块，先慢速闪三下，再快速闪三下，最后消失。

animation: 1s twinkling 3;

就相当于

animation-name: twinkling;

animation-duration: 1s;

animation-timing-function: ease;

animation-delay: 0s;

animation-iteration-count: 3;

animation-direction: normal;

animation-fill-mode: none;

animation-play-state: running;

效果

92ce36ae526afa49bc64dce8dac6c6a9.gif

我觉得还可以:P 反正我只能写成这样了。

最后把动画加到转盘的灯上。完成代码(好像颜色变了，咳，那是因为我animation学了太久都掉色了)：

< htmllang= "en">< head>< metacharset= "UTF-8">< title>幸运大转盘 title>< style>* { /* 重置默认样式 */margin: 0;padding: 0;border: none;outline: none;user-select: none;}.wrapper{position: relative;height: 200px;width: 200px;padding: 20px;margin: 20px;background-color: #ff5555;box-shadow: #0000000px0px10px;border-radius: 50%;}.light{position: absolute;height: 10px;width: 10px;border-radius: 50%;top: 5px;left: 115px;transform-origin: 5px115px;}.light-twinkling{animation: 1stwinkling 3, 100ms3stwinkling 3;}.light:nth-child(2n){background-color: #fafce7;}.light:nth-child(2n+1){background-color: #ffe58b;}.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: 200px;width: 200px;background-color: #b7b7b7;border-radius: 100px;}.sector{position: absolute;left: 100px;top: 0px;width: 100px;height: 200px;font-size: 14px;border-radius: 0px100px100px0;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: 40px;padding: 5px3px057px;height: 195px;transform: translateX(-100px) rotate(36deg);transform-origin: right center;border-radius: 100px00100px;}.sector-innerspan{display: block;transform-origin: center;transform: rotate(-19deg);color: #d46854;}.pointer{position: absolute;left: 79px;top: 79px;z-index: 10;height: 30px;width: 30px;padding: 6px;color: #fff899;line-height: 15px;font-size: 12px;text-align: center;background-color: #ff5350;border-radius: 50%;border: 1pxsolid #ff5350;transition: transform 3scubic-bezier(.2,.93,.43,1);}.pointer::after{content: '';position: absolute;left: 14px;top: - 24px;border-width: 12px6px;border-style: solid;border-color: transparent;border-bottom-color: #ff5350;transform-origin: center;}.result{margin: 20px60px;}@ keyframestwinkling {50% { background: transparent; }} style> head>< body>< divclass= "wrapper">< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "light"> div>< divclass= "panel">< divclass= "sector">< divclass= "sector-inner">< span>谢谢参与 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>5 0 积分 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>谢谢参与 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>100元话费 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>5 0 积分 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>谢谢参与 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>100元话费 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>谢谢参与 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>5 0 积分 span> div> div>< divclass= "sector">< divclass= "sector-inner">< span>10元话费 span> div> div>< divclass= "pointer">开始抽奖 div> div> div>< divclass= "result"> div>

< >letgetEle = document.getElementsByClassName.bind( document);letpointer = getEle( 'pointer')[ 0];letresult = getEle( 'result')[ 0];letlights = Array.prototype.slice.call(getEle( 'light'));

letonRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了letreward = [ '谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分','谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];

// 根据随机角度获取奖励letgetReward = ( function( ){currentDeg = 0;returnfunction( ){// 转三圈到四圈letrotateDeg = Math.random * 360+ 1080;currentDeg += rotateDeg;letrewardText = reward[ Math.floor((currentDeg + 18) % 360/ 36)]return{deg: currentDeg,text: rewardText === '谢谢参与'? '很遗憾，您没有获得奖品。': '恭喜获得: '+ rewardText}}});

pointer.addEventListener( 'click', => {if(onRotation) return;console.log( '开始抽奖');onRotation = true;lights.forEach( light=>{ light.className += ' light-twinkling'; });letnextStatus = 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);}) > body> html>

声明：文章著作权归作者所有，如有侵权，请联系小编删除。返回搜狐，查看更多

责任编辑：

李小卿的小号
关注
  • 7
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5转盘抽奖源代码
09-06
H5源码转盘抽奖，七个奖项，可自己修改图片来改换奖项，包含js，CSS，html代码，不包含后台程序，效果很漂亮，可直接使用
HTML5大转盘抽奖特效代码
01-16
HTML5微抽奖大转盘JS特效代码，其实效果主要是用到图片旋转插件jQueryRotate.js，可动态读取奖品 效果还是非常流畅的，经常用于活动营销以及微信营销，可以参考使用。
html+css+js实现带有转盘的抽奖小程序
jakelihua
01-20 5313
html+css+js实现带有转盘的抽奖小程序。
超级大转盘！(html+less+js)（结尾附代码）
最新发布
NanChen的博客
05-08 642
有个会议需要用到转盘抽奖，有机会赢得不同奖品。html+less和 js实现 先上效果： 旋转动画的话其实就是中的 transform 属性，改变转盘旋转的速度以及动画结束时间 JS 部分 因为数据肯定是活的，所以我们这里要把数据单独拎出来 圈里的图片可以自己查找替换 定义变量 把奖品放入这个函数中 抽奖部分 转盘转动角度 完整代码： 结尾 当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）
html幸运大转盘抽奖（附源码）
xcLeigh
11-24 4574
html幸运大转盘抽奖（附源码），好看的，漂亮的，酷炫的幸运大转盘抽奖，动态的抽奖效果，转盘的图片文件包含psd源文件，可以直接改各种自己喜欢的风格，里面内涵几种漂亮的转盘，在次代码基础上，可以加入自己的元素，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML实现转盘抽奖的简单通用模板
z2141830440的博客
11-29 2289
基本需求分析有一个由九个小正方形组成的大正方形，类似与一个3*3的矩阵，其中，最中间的小正方形颜色不同用于区分。为了实现抽奖的效果，我将外层的八个小正方形作为我的抽奖格，其中八个抽奖格中应该有一个格子的颜色不同于其他七个格子，用来表示当前抽中的物品，每次打开网页时，这个物品的位置应该是随机的当我开始抽奖时，这个被抽中的物品的颜色就会变成和其他七个格子的颜色一样，它相邻的一个格子的颜色则变为它原本的颜色就这样不停的变换，达到一个类似“动态”的效果，最后随机停在某个格子后就不再变换，表示为抽中的物品。
网页版――用html编写一个抽奖转盘
热门推荐
weixin_42367888的博客
02-14 1万+
HTML编写一个抽奖转盘 以下是所有代码：HTML、css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="author" con...
html5画抽奖转盘,HTML5抽奖转盘-CSS3超简单版本
weixin_39992665的博客
06-15 264
核心思路采用CSS3的transition(过渡效果)，给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率，代码如下(浏览器前缀可自行添加)：#pointer {transition: transform 6.5s;transition-timing-function: ease-...
抽奖转盘 HTML+CSS+JS实现
10-17
HTML+CSS+JS 实现的 通过json 动态生成文本、图片 、转盘概率 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源码.rar
01-28
本项目利用jQuery实现了一个“幸运大转盘”抽奖程序，具备良好的浏览器兼容性，适用于各种平台和设备。 首先，我们要了解jQuery的核心特性。jQuery简化了DOM操作，提供了链式调用、选择器等功能，使得开发者能快速...
Vue.js实现大转盘抽奖总结及实现思路
12-13
css3 transform控制大转盘抽奖过程的动画效果。 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示。 中奖结果弹窗，为抽奖组件服务。  实现步骤如下：  构建api奖品配置信息...
html网页大转盘抽奖页面代码
12-19
html网页大转盘抽奖页面代码，转盘抽奖，希望年终抽奖用的上；
html 大转盘抽奖
09-17
一共4套html抽奖源码 一共4套html抽奖源码 js九空格抽奖代码 大转盘抽奖 注解 一共4套html抽奖源码 一共4套html抽奖源码
HTML5微抽奖大转盘JS特效代码.zip
07-11
实现效果： HTML5微抽奖大转盘JS特效代码，其实效果主要是用到图片旋转插件jQueryRotate.js，可动态读取奖品效果还是非常流畅的，经常用于活动营销以及微信营销，可以参考使用。
js转盘抽奖特效
10-16
// 代码整理：懒人之家 lanrenzhijia.com /* * 删除左右两端的空格 */ function Trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } /* * 定义数组 */ function GetSide(m,n){ //初始化数组 var arr = []; for(var i=0;i<m;i++){ arr.push([]); for(var j=0;j<n;j++){ arr[i][j]=i*n+j; } } //获取数组最外圈 var resultArr=[]; var tempX=0, tempY=0, direction="Along", count=0; while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n) { count++; resultArr.push([tempY,tempX]); if(direction=="Along"){ if(tempX==n-1) tempY++; else tempX++; if(tempX==n-1&&tempY==m-1) direction="Inverse" } else{ if(tempX==0) tempY--; else tempX--; if(tempX==0&&tempY==0) break; } } return resultArr; } var index=0, //当前亮区位置 prevIndex=0, //前一位置 Speed=300, //初始速度 Time, //定义对象 arr = GetSide(5,5), //初始化数组 EndIndex=0, //决定在哪一格变慢 tb = document.getElementById("tb"), //获取tb对象 cycle=0, //转动圈数 EndCycle=0, //计算圈数 flag=false, //结束转动标志 quick=0; //加速 btn = document.getElementById("btn1") function StartGame(){ clearInterval(Time); cycle=0; flag=false; EndIndex=Math.floor(Math.random()*16); //EndCycle=Math.floor(Math.random()*4); EndCycle=1; Time = setInterval(Star,Speed); } function Star(num){ //跑马灯变速 if(flag==false){ //走五格开始加速 if(quick==5){ clearInterval(Time); Speed=50; Time=setInterval(Star,Speed); } //跑N圈减速 if(cycle==EndCycle+1 && index==parseInt(EndIndex)){ clearInterval(Time); Speed=300; flag=true; //触发结束 Time=setInterval(Star,Speed); } } if(index>=arr.length){ index=0; cycle++; } //结束转动并选中号码 //trim里改成数字就可以减速，变成Endindex的话就没有减速效果了 if(flag==true && index==parseInt(Trim('5'))-1){ quick=0; clearInterval(Time); } tb.rows[arr[index][0]].cells[arr[index][1]].className="playcurr"; if(index>0) prevIndex=index-1; else{ prevIndex=arr.length-1; } tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className="playnormal"; index++; quick++; }
大转盘抽奖代码-html 直接可用
11-02
双十一活动，进行大转盘抽奖，为了迎合双十一活动，进行了代码整理，下载即可使用。
基于 CSS3 实现抽奖大转盘.pdf
08-20
1. 创建项目目录结构：首先我们需要创建一个项目目录结构，包括 lottery.html、css 目录、js 目录、img 目录等。 2. 下载实验用到的图片：我们需要下载实验用到的图片到 img 目录下。 3. 下载 jQuery 库：我们需要...
基于zepto实现的适合移动网页的大转盘抽奖效果.zip
07-11
本项目通过Zepto.js库实现了一种适用于移动网页的大转盘抽奖效果，旨在为用户提供流畅、直观且富有吸引力的交互体验。Zepto.js是一个轻量级的JavaScript库，类似于jQuery，特别适合移动端的性能优化。 1. Zepto.js...
php 大转盘抽奖概率 角度,在线抽奖大转盘和概率计算
weixin_35390057的博客
03-11 402
html>抽奖效果演示.rotary{position:relative;width:854px;height:504px;margin:0auto;background:#d71f2eurl(p_w_picpaths/bg1.png);}.rotaryArrow{position:absolute;left:181px;top:104px;widt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值