步骤分解：教你五步实现css转盘抽奖小游戏

教你五步实现css转盘抽奖小游戏

先看一下整体效果。

分解思路：
第一步：先画一个园

这里是class="box"代码段
第二步：在圆上面再画一个圆圈，加点阴影效果，有那么点立体的感觉

这里是在上面的基础累加上class="turntable"代码段
第三步：画小圆灯

累加上class="little-circle"代码段，这里小圆灯等分用到了transform-origin属性，找准旋转的圆心即可。
第四步：画扇形奖品区

画扇形是一个比较头疼的问题，这里是用平行四边形代替，把多余的部分遮住，留下的就是扇形。通过父级元素的overflow:hidden来遮住多余部分。
第五步：填充奖品信息，增加抽奖按钮，搞定

等一下，还没完，不是说五步实现转盘的吗？现在样子是出来了，但是它还不能转啊。其实，在实现上述效果的过程中，频繁使用到了css的transform属性，要让转盘转起来，还是用这个属性，给定一个角度，让它转动指定角度即可。只不过，你不能让他直接转多少角度，应该有个转动的过程，配合transition属性即可。
完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>抽奖</title><style>* {margin: 0;padding: 0;}body {font-family: "Microsoft YaHei",微软雅黑;}.box{width:600px;height:600px;background-color: #ff9615;padding: 20px;border-radius: 50%;border:2px solid #ffd50e;position:relative;margin: 100px auto;}.turntable{width:600px;height:600px;background-color: red;border-radius: 50%;position:relative;box-shadow: 0 0 10px #000;line-height:95px;}.little-circle{width:10px;height:10px;border-radius:50%;border:1px solid black;position:absolute;left:50%;margin-left: -5px;margin-top: 5px;}.little-circle:nth-child(even) {background-color: #f1c96c;}.little-circle:nth-child(odd) {background-color: #fff6db;}.prize-zone{width:556px;height: 556px;border-radius:50%;position:absolute;left: 50%;margin-left: -278px;top:50%;margin-top: -278px;overflow: hidden;}.prize{width:278px;height:278px;position:absolute;left:0;top:0;}.prize:nth-child(odd) {background-color: #f1c96c;}.prize:nth-child(even) {background-color: #fff6db;}.btn{width:100px;height:100px;border-radius:50%;position:absolute;left:50%;margin-left:-50px;top:50%;margin-top:-50px;background-color: #ff7609;color:white;font-size: 30px;font-weight: bolder;text-align: center;vertical-align: middle;cursor:pointer;}.pointer{width:0;height:0;position: absolute;left:50%;margin-left: -25px;top:50%;margin-top: -100px;border-bottom: 100px solid #ff9615;border-left:25px solid transparent;border-right:25px solid transparent;}.content{width:200px;height:250px;position:absolute;right:0;bottom:0;text-align: center;}.content .thanks{width:34px;height: 150px;font-size:30px;font-weight: bolder;color: #ff6e37;margin:0 auto;line-height: 34px;padding-top:20px;}.content .img{width:10px;height:10px;position: absolute;left:50%;margin-left:-40px;top:5%;}.content img{width:80px;height:100px;position: absolute;}.txt{width: 100px;height: 50px;font-size: 20px;line-height: 32px;margin: 0 auto;padding-top:120px;color: #ff6e37;font-weight: bolder;}</style>
</head>
<body>
<div class="box"><div class="turntable"><div class="little-circle"></div><div class="little-circle"></div><div class="little-circle"></div><div class="little-circle"></div><div class="little-circle"></div><div class="little-circle"></div><div class="little-circle"></div><div class="little-circle"></div><div class="prize-zone"><div class="prize"><div class="content"><div class="thanks">谢谢参与</div></div></div><div class="prize"><div class="content"><div class="img"><img src="prize/router.jpg" /></div><div class="txt"><p>四等奖</p><p>路由器</p></div></div></div><div class="prize"><div class="content"><div class="thanks">谢谢参与</div></div></div><div class="prize"><div class="content"><div class="img"><img src="prize/bicycle.jpg" /></div><div class="txt"><p>一等奖</p><p>自行车</p></div></div></div><div class="prize"><div class="content"><div class="thanks">谢谢参与</div></div></div><div class="prize"><div class="content"><div class="img"><img src="prize/glass.jpg" /></div><div class="txt"><p>二等奖</p><p>3D眼镜</p></div></div></div><div class="prize"><div class="content"><div class="thanks">谢谢参与</div></div></div><div class="prize"><div class="content"><div class="img"><img src="prize/kindle.jpg" /></div><div class="txt"><p>三等奖</p><p>kindle</p></div></div></div></div><div class="pointer"></div><div id="btn" class="btn">抽奖</div></div></div>
<script>// 小圆圈的旋转变换let circleList = document.querySelectorAll('.little-circle');let len = circleList.length;let rotateStep = 360/len;let halfOfRotateStep = rotateStep/2;circleList.forEach(function(item,index){let deg = rotateStep*index+halfOfRotateStep;item.style.transform="rotate("+deg+"deg)";item.style.transformOrigin="5px 295px";});// 每一个奖品的变换let prizeList = document.querySelectorAll('.prize');let pLen = prizeList.length;let pRotateStep = 360/pLen;let halfOfPRotateStep = pRotateStep/2;prizeList.forEach(function(item,index){item.style.transform="rotate("+(pRotateStep*index)+"deg"+") skewY("+pRotateStep+"deg)";item.style.transformOrigin="right bottom";});// 奖品的内容变换let contentList = document.querySelectorAll('.content');contentList.forEach(function(item){// 反向变换，用于抵消div.prize的变形 这里的translate值，其实可以用三角函数算出来，但是太复杂，我就用肉眼观测取了7px 100px这么个值item.style.transform = "skewY(-"+pRotateStep+"deg) rotate(-"+halfOfPRotateStep+"deg) translate(7px, 100px)";item.style.transformOrigin = "center center";});let retry = false;// 抽奖按钮的点击事件document.querySelector('#btn').onclick=function(){if(retry){retry=false;clear();document.querySelector('#btn').innerText="抽奖";return;}// 计算一个随机的度数，转起来，先转上十圈然后再转一圈内的随机度数document.querySelector('#btn').style.cursor="wait";let deg1=360*10;let deg2 = (Math.floor(Math.random()*8)+1)*45+22.5;let deg=deg1+deg2;console.log(deg);let truntable = document.querySelector('.prize-zone');truntable.style.transition="all 10s ease";truntable.style.transform="rotate("+deg+"deg)";};// 监听动画完成事件document.querySelector('.prize-zone').addEventListener('transitionend',function(){document.querySelector('#btn').style.cursor="pointer";retry=true;document.querySelector('#btn').innerText="重置";});function clear(){let truntable = document.querySelector('.prize-zone');truntable.style.transition="none";truntable.style.transform="none";}
</script>
</body>
</html>

步骤分解：教你五步实现css转盘抽奖小游戏相关推荐

java调起喇叭,【音响知识】调音不求人教你五步轻松调出好声音
原标题:[音响知识]调音不求人教你五步轻松调出好声音调音不求人教你五步轻松调出好声音有很多车主反映,改装了音响但出来的效果不好,其中还有价格不菲的器材,为改善音质而做的音响改装为何改完后声音也 ...
楼层住宅选第几层，教你五步选出最佳楼层
楼层住宅选第几层,教你五步选出最佳楼层一,居住型住宅通用法则:不要选第一层和最顶层. 二,黄金分隔.0.618为黄金分隔值,楼层总数*0.618,就是该栋高楼的最佳楼层. 对于16层 ...
html+css+javascript实现小游戏2048（详解，附源代码）
html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...
【Java速成教学】桌球游戏项目_教你用最短的时间开发桌球小游戏_Java初学者项目
Java小游戏项目回归!今天给大家带来的是桌球游戏~ 本课程面向刚入门或者有一定Java基础的人群,帮助学员理解面向对象编程,并将基础知识进行实际应用,最终目标为开发出一个功能强大的桌球游戏.[Jav ...
五个基于Google Earth的小游戏
五个基于Google Earth的小游戏 Google Earth是互联网巨头Google公司于2005年推出的一款虚拟地球仪软件,它把卫星照片.航空照相和地理信息系统布置在一个地球的三维模型上,使用 ...
JS与HTML、CSS实现2048小游戏（一）
JS与HTML.CSS实现2048小游戏(一) 引言知识储备编译器推荐游戏框架构建游戏的基础页面后续文章引言这是大一刚结束的时候做的东西,之前也写了文章做记录,最近想发一下博客,就重新整 ...
birt报表表格边框_手把手教你五步制作出一张领导驾驶舱报表
领导驾驶舱报表是一款为企业内部领导及相关高管提供企业数据指标分析的报表,用来实时反映企业的运行状况,将企业管理决策提升到一个新的高度. 今天小编用亿信华辰的亿信ABI给大家实际演示,通过5个步骤就可以 ...
小学生学计算机步骤,小学生计算机入门“五步走”
小学生计算机入门"五步走" 新学期开始了,小学信息技术入门课在学生学习计算机的过程中非常关键,但由于理论知识颇多,学生听起来会感到很枯燥.笔者结合自己几年来的教学实践,谈一谈自己的 ...
html css js实现快递单打印_JS与HTML、CSS实现2048小游戏（六）
在前面的五篇文章中,小编带大家完成了网页版2048小游戏的基本游戏逻辑.但是在游戏结束的gameover()方法中咱们只是简单的通过alert来弹出一些信息,这样的话只能出现下图的效果.这样的游戏,不 ...

步骤分解：教你五步实现css转盘抽奖小游戏

步骤分解：教你五步实现css转盘抽奖小游戏相关推荐

最新文章

热门文章