前端实现炫酷中奖效果

有这么一个需求，他是怎么实现的？这是我们的六道轮回，走着这个转盘是不不断的转了呀，哎，看一看，抽到一个天道，那这个效果是怎么实现的呢？找设计做一张图，然后我再加个手推一下， 我记得谁呀？上一次去找 ui 小姐姐，人家说让他滚，我来分析分析这个效果怎么做吧。这个案例啊，已经准备好了相关的 at 码文件了，若干的长量，比如说选择那角度啊，字号大小，然后我在这里面提前准备好了相关的数据，因为咱们是六道轮回，里面是不是有六个数据啊？所以说我在这里面通过 id 来做了一个标志，那这是我们 构成的，他的名字是什么？他的图片是什么？还有下面分别是恶鬼道、地狱道。准备好了六条数据，接下来我们要做的核心操作可以分成四步，那第一步啊，我们初始化给每个奖项添加样式，他呢是分成六个的，这个时候呢，我们可以通过一个函数啊，利用我们的循环的方式，把我们这个每 一道的角度给他做好。接着我们看第二块，我们可以把刚才生成的奖品呢追加到对应的盒子里面，哎，我们就通过字母串拼接就可以实现了。这个选完之后呢，紧跟着第三个就说我们是不是随机抽奖了，当我点击这个旋转按钮的时候呢， 我可以通过我们的随机函数啊，随机抽出一个来，抽完了之后呢，就可以让他来进行旋转了，那最后一步就是来进行旋转角度，在这里面我们用了一个动画的方式啊，然后让他来进行旋转， 最后呢，我们多了一个弹窗效果，就可以把刚才效果弹出来喽。当然了，这个呢，程序是可扩展性的。咱们是六道轮回吗？那我们想再给他添加一道。没问题啊，我们只需要把数据增加一条就可以了， 来复制粘贴。好。这个呢，我们叫一再加个什么刀，顺顺道道可以吧？添加完之后存 变成几道了，七道是自动来生成的啊。好了，我来随机点一下，看看能不能抽到我的神神道道 two thousand years later ok， 是不是已经抽中了呀？哎，说明我们做的程序是可以的。咱们这个其实程序写的还是公平的啊，但是真正的公司里面一般大奖都是稳定的，学会了吗？学会了，但是老师这个奖励我还是不要了，多给你有点意思吧，下课。

马上过年了，公司里面又要开年会抽奖了，给大家推荐一个炫酷的抽奖系统，这地方是整个需要参与抽奖的所有的人员，点抽奖之后变成一个球棋，然后开始旋转，旋转的过程中你可以点击暂停， 这时候就会弹出来中奖人员，然后我还可以继续接着进行下一轮抽奖， 简单吧，然后这里面纯前端实现的，然后你在这里面你可以你的这个参与抽奖的人数，比如说你没公司的员工，你可以导出一个 excel 进行导入，导入完了之后，这地方的数据就是我们 整个所有的已导入的数据，然后中奖人员我们在这地方我们可以获取，中奖人员就导出就行了，这里面也有导出按钮，奖品我也可以去配置，比如说奖品的数量，三等奖几个人，二等奖几个人，特等奖几个人就抽几次 啊，单次抽的个数。抽奖的时候也可以播放背景音乐，有需要代码的大家可以评论区留言整理代码就是用我们的 v 三实现的，然后引了一个手 g s 的 这个库，就主要是实现这个球体的旋转效果，其他的 excel 导出就是用这样的库，需要代码的大家可以评论区留言，也可以看一下主页。

哈喽，大家好，今天是七夕，做了一个小的抽奖，可以看看效果，这里面抽奖是辣条，我们再次运行的时候这还是辣条，因为这是我故意写的。好，我们具体看一下怎么实现的的话，我们先定我们的动物结构 啊，一个 list 给你的 item， 因为中间的一项的话就是第五项引得死的话，第四项的话是十大，我们标特殊一个标识，再看一下样式的一些定位啊，先 reset flex 布局， 后来说墨兰是黄色，后来说中间这一位的话就设置一个绿色，嗯，到我们的结石，结石我们有先定一个奖品列表，后来说我们通过洗牌给他重置一下。三的话，我们给我们的数据加 加上每项加上数据当小于四就取对应的，所以等于四叫开始，剩下的话是取减一，我们给他复值。最终我们要看一下我们获奖的一个顺序，其实从所以零一二 对应的话应该是五八，应该是五八七六三，但是一个这样的顺序我们要特殊定一下。我们定义我们的就是动画的时候，其实我们这里做的简单，清除上一次的动画变成黄色，当前的设置绿色 啊，当我们点击的时候，我们设置了一个次数，就是他走走多少圈，其这一块的话也可以去调整我们后来次数，时间越来越快，因为我只是简单的给大 家演示一下。当我们定义的时候，我们就开始动画，那最终最后的时候，我们得到我们最后一次的时候，我们再去寻找我们的辣条，当我们寻找辣条的时候，我们对应的再动画一下。

好，这个视频呢，我们来说一下 will 该如何实现一个抽奖的项目啊？就是转盘抽奖，那么首先呢我们要把它的结构拿进来，再然后呢把它的样式呢给做一做，这些都是很简单的，主要是里面的逻辑啊， 首先呢我们要让指针和转盘在同一个圆点上面，另外呢我们要设置边缘的这些闪动效果， 最后呢还要给指针添加上一个开始事件，那这样就完成了。当然不是啊，这都是一个最简单的一个流程，那我最主要的呢是中间这个转盘他该如何去转，对吧？ 那这个地方呢，我们就去计算了一下，呃，转盘当中他有哪些奖项，根据这些 奖项呢去设置他每一个奖项的角度。好，那么下面呢就是我们旋转完之后呢，要让他进行重置，就是这个指针，这个转盘他要重重置他的这个角度， 再往下呢就是你每一个转盘里面所设置的这些奖项，对吧？他指到了谁，那我们就应该给他提示对应的一些奖项。 ok， 那除了设置这些奖项以外呢，我们还可以给他设置概率，每一部分他，呃被抽中的概率是多少？ 咱们可以在这里进行一个设置，设置完之后呢，我们就可以去调用他的这个 set 方法来 set 方法，去调用这个方法，然后给到他 这里就可以显示。哎，用户到底抽到了哪一部分？来这里咱们可以演示一下啊，就是抽奖次数呢，已经用了一次，那他呢就变成了四包括，哎，你看刚才呢，他已经是呃抽中了，这个重在参与啊，来 来看一下，抽中重在参与，对吧？之后呢他会通过定时器呢再次重置这个角度， 那两次呢？都是重在参与，第三次咱们就不抽了，是吧？就是这样一个实现的过程，那么大家呢？可以根据自己的情况来设置你这个转盘，哎， 设置转盘的角度以及设置转盘的，呃，内容，还有就是，嗯，来设置你的这个概率， ok， 这个项目呢咱们就说到这里。

做过前端的都知道，再不是动画利器，但你还在手写动效吗？今天给大家推荐一个技能，只需接入 codex 就 能轻松实现炫酷动效，下面带大家看看实际效果吧！ 如果你也做出来了，欢迎在评论区分享一下你的效果，看看大家都能玩出什么新花样！

最近我在研究 ybook coding 手册应用，我制作了一个抽奖小工具，无论是公司的年会、班级、元旦抽奖和日常活动都可以用到， 而且背景画面随意切换，直接给大家展示。首先是界面非常的简洁，操作也很简单，右侧是奖品的设置区，这里你可以设置奖品，还可以上传图片，各种奖项，获奖的名称和中奖的人数随意添加。 奖品设置好后啊，咱们就可以设置人名，复制粘贴就可以，还可以手动删除和添加，实时保存。 再来说背景，直接上传你喜欢的图片就行，各种画面随意切换。我还准备了新年氛围拉满的背景图提示词，没有任何套路，全部免费分享给大家。 背景搞定的话，咱们就可以直接开抽。我设定了两种模式，单次模式和批量模式，单次模式是一次只可以抽一名同学，批量模式是一次可以抽很多同学，我们试一试， 先试单次模式，点击开始中奖后，人名会直接红色高亮停留，左侧奖品区也会同步显示，一目了然。再试一下批量模式，点击开始一次就能抽出多名获奖者，同样红色高亮提醒奖品区同步记录，省心又高效，而且获奖人不会 重复的被抽中。最后更方便所有的获奖名直接导出表格，方便核销。统计效果是不是超赞，我一个编程小白能手搓成功， 真的是太兴奋了，今天免费分享给大家，一定要找我啊！我是安然，一个在 ai 时代努力前行的普通人。各位还有哪些想要的实用工具需求都可以在评论区打出来，下次一一给大家实现搞定更多刚需。

大乐透出了一个新的玩法，就是一带全托，这个玩法还真有意思，只要二十二块钱就能把原来的五加二的玩法玩出五加一的效果， 是不是很神奇？其实这个玩法特别的简单，前面的五个红球自己随便选，随便去研究，后面只需要定好一个打码来号，剩下的十一个号码就全部拖拽就行了， 只要前面的五个红号都中了，就能直接拿下二等奖，要是后面选的蓝号打码也中了， 就是直接中了一等奖，还附带了十个二等奖，这个性价比是不是非常的高。最后还是提醒大家，彩票的本质是公益，要理性购彩，娱乐为主，千万不要上头。

大家好，我是老孙家人们，今天给大家介绍超厉害的一物一码系统。先说说产品市场营销，消费者扫扫二维码，就能参加企业精心设置的营销活动，领红包，用积分兑换礼品，好玩又实惠，产品复购率那是直线上升。再看防串功能，这个系统能建立产品关联关系， 仓库发货时扫扫箱码或者托盘码，就能轻松掌握产品流通数据，实现预警式防串关，让串货无处遁形。还有二维码溯源，它能实现产品正向追踪，从生产源头一路追到消费者终端，也能逆向回溯， 从中端倒查回源头。企业能监控产品全生命周期，消费者扫码就能查看溯源信息， 信任感直接拉满。最后扫码查询方位，系统用算法加密技术，给每一个产品生成独一无二的二维码，消费者手机一扫，真伪立马知晓。而且系统还实时记录了扫码时间和位置，帮咱识别假冒产品。一 物一码系统功能强大又实用，你还不心动吗？关注老孙不迷路，软件开发找老孙，靠谱又省心，记得点赞关注哦！

哈喽，小伙伴们好，接下来我们做一个平滑三 d 的倾斜效果，哎，是不是非常的炫酷呀，哎，只需要几句代码就可以完成这种效果喽。首先呢，我给小伙伴分析一下 结构是什么样子，放到一边，打开我们的代码，我们知道页面中有四个这样的盒子，所以说我有一个 cut， 里面包含着四个 div， 其中每个 div 上面有一张图片在这显示，还有一个 h 四是我们的标题，还有一个段落 p， 那是下面的文字好，结构非常清晰了，里面设置了相关的样式，通过法拉斯布局啊， 一个排版，想让它实现这种三 d 倾斜的效果，我们就可以通过一个 g s 库来实现。这个 g s 库呢，它的官方地址啊，是这个地址 vanilla tilt。 那到底怎么去使用呢？首先我们说先要引入一下我们 g s 这个库啊，然后里面已经写好了相关的我们的元素啊 div， 我们可以这么去做，哎， vanilla tilt， 然后把这个呢 ctrl 加 c， 然后呢到我们这里面去，这个啊， gs 文件我已经在这里面准备好了，我们引入进来，然后 ctrl 加 v， 哎，把这个代码呢拿过来， you adamant， 就是你的这个选择器，你想让哪一个盒子来进行倾斜就选哪一个，我们这个盒子呢叫做 cat item， 所以我们 ctrl c 复制一份啊，然后把它呢给它拿过来， ctrl 加 v， 好， ctrl 加字，保存一下，我们来看效果吧，然后我们鼠标一放上去，哎，这 旋转效果是不是立马就出来了，看起来非常简单啊。好了，那在这里它里面有两个选项，其中第一个选项叫 max， 这呢是呃，鼠标经过的时候，它可以旋转到角度， 默认是二十五度，你可以大一点，比如说我改成一个五十，这样的话，你看我鼠标带一经过，它的度数啊，就会更大一些。 speed 也说鼠标经过时，它旋转的速度让它稍微慢一点，设置为三千。现在呢，我们鼠标一经过，哎，它的速度就会变慢了一些。好了，那这个呢， 是我们设置的是不倾斜了。那只不过我们想让他有一个立体的感觉，像三 d 那种效果。来看一下我们的官方文档，我想创建一种视察的效果，是这个白色的盒子可以突出效果。在这里我需要去添加几句 css， 有一个 transform 里面的， 我复制一份，把它添加到你倾斜的元素身上，我们找到我们倾斜的元素是 cut item， 然后呢，我们 ctrl 加 v 给它拿过来。好，除了这个之外呢，它里面还有说明，可以在给他添加一种透视效果。 ctrl 加 vok， 这样添加了透视效果。我们再来看看我们的效果，是不是把一放上去， 哎，看起来还不是那么的明显。别忘了要想加透视还需要去加我们的 translate 啊。 z 轴是不是有一个更好看的这种立体效果呀？那这个呢，是添加到我们的内部元素，就是紫元素身上，我们 ctr 加 c 也复制一份。那我们想让里面的这些图片哎，或者是 h 四标题啊，更立体一些，所以 我们可以加在图片还是四线上。那图片呢？我卡上加 v， 让他传次力的 c 主变得更大一些。那默然是二十啊，我这稍微大一点，改成个三十像素，奇迹发生了，说明已经过我们这个图片是不是突出的感觉出来了？ 好了，那我们想让标题更加突出一些呢，找到 h 四再加上穿刺类的 c 就 ok 喽。好，这个呢，我们高一点改成个四十，比上面还要高一点。我们的页面如何添加这个效果？ 炫酷到爆呀。那只不过，哎，这样只是一个效果啊，我后面这些是不成效的哎。官方文档里面都做了个说明， 如果你想让我们所有啊，所有的这些元素啊都生效，那我们就不用 query select 了。 query select al 呢？可以设置所有的，所以我们只需要找到 c s s， 把 query select 改成一个 al 就可以了。 a l， 看看我们的效果。咦，哎，是不是就出来了呀，有点意思吧。

老板让我们来实现鼠标经过旋转的一个效果，而且还挺立体的，怎么做呀？我只会单面，双面不会啊，那你的公司看来只能发一半了呀。这个呢，正面这个图片，当我们鼠标一经过的时候呢，会转到另外一面，是有两面的操作效果，其实我们可以这么去做，他呢肯定是有两个盒子是不组成的，这个呢， 我们做个正面，我们叫他 fry。 当我们鼠标一经过的时候呢，是不是转到另外一面了呀？是我们需要再准备另外一个盒子，这个呢叫 bike， 但是呢，这两面不能同时看到，是不是我鼠标经过了是不是才转的呀？两面对不对？默认的 这样上下一个关系，我呢把我们这 back 是旋转一百八十度旋转到这一面，然后再利用定位关系定出来，他俩是不是成了一个，现在你看到是不是一个，前面当我手背一经过呢？ back， 这不就可以了，这里面有个小地方，不是让这个大盒子旋转，而是让这两个小盒子来旋转，一起旋转就行了。来我们看看代码是怎么实现的。这里面有两个盒子，一个叫 front， 一个叫 bike， 他俩是通过定位的关系是不定到一起就行了，但是呢， 我们需要注意的话，第一个加了一个 pro 三 d， 让里面这两个纸盒子是保持这种立体的效果。第二个呢，就是选择的背部是不可见的，如果我正面，你选择的背面是不，我前面这个盒子就不要看见了。接下来我们需要看的重点是说背面这个盒子还记得吗？是不选择一百八十度啊，所以说我们往下走可以看到我们背面这个盒子，然后我们让他 type y 是不是一百八十带一个，首先旋转一百八十度，然后利用关系定位好就可以了。但是呢，我们又发现这两个盒子里面，你看这纸盒子是没放上去，有没有一种立体的感觉，它里面的字要比着我这个是不是要突出一点呀？ 这个是用了 z 轴，所以说我给我这两个盒子里面所有的这些文字啊，再添加一行代码，川字里的 z 五十像素，意思是字离着我们这个盒子往我们这个 z 轴是都五十像素啊。好了，有了之后呢，接下来我就可以做鼠标经过效果了。注意，刚才我说过，是让这个大盒子来旋转吗？呀， 丁克太认真了，他的写法是这么写的，当我们鼠标一经过立的时候，里面的 front 和 back 来旋转，这 frent 在前面，他，他在旋转的时候呢，是不是前面要旋转一百八十度啊？但是呢，我们这个 back 原先是不是已经旋转一百八十度了，他在旋转到零度，是不也是走了一百八十度？好，这是整个我们代码的结果，这个写完了，你还担心你的工资只能拿一半了吗？

calvis 里边如何去实现动画？就是逻辑很简单啊，就是你把它擦了重画，比方说有一个小球吧，你要从这里，然后呢给他运动，到这边怎么运动呢？你先把它擦掉， 然后呢再画一个小球，然后再擦掉，再画一个小球，对吧？每一次画呢，往右边靠，这不就动画了吗？对不对？非常简单啊，比方说呢，我这里举个例子，你看这个非常经典的一个星空的星空动画，它到底是怎么做的呢？首先第一步 你要能够画出一张静态的星空，比方说这里，对吧？每次刷新呢，他星空的位置都是随机的，你要能够画出这么一张静态的图，静态图我们看一下代码啊，非常简单过一下。首先呢，有个构造函数叫做点，星空就是个点吗？调这个构造函数就能创建一个点，这个点里边有些属性，一个是点的半径，其实就是一个圆圈，你看这星空就是个圆圈，这圆圈半径，然后呢位置随机， 然后就把画出来就完事了啊，就画出一个点了，那要画多个点呢？我又建了一个构造函数，叫图图，里面包含多个点吗？对吧？你给我传入点的数量啊，这里默认三十个，还有个最大距离，这个最大距离是啥意思呢？就是你看啊，点与点之间是有连线的，对吧？这个点与点之间靠的越近呢，他的连线呢，他就越偏白色， 靠的越远呢，他连线呢就越透明，当他超过一个极限距离的时候，他就完全就没有连线了，对吧？这就是最大距离的意思。 然后呢，我的构造函数里边就把啊，每一个点通过构造器 point 刚才那个构造器创建出来，然后呢？把最大距离保存一下，然后就画呗，具体怎么画那无所谓了啊，就是把每一个点画出来，然后连线啊，没有超过最大距离就连线，控制一下它的透明度就完事了。那么这就是一张静态的一个星空的图，但这个星空的图呢，没有运动， 那怎么样运动呢？运动就是不断的画，对吧？所以说画整张图的时候呢，我们首先注册一个 request animation frame， 每一帧都重新画一遍，那么每一次画呢，都要清空了之前的画布，然后不断的画，不断的画。 当然现在不断的画呢，是没有任何效果的啊，因为这些点都没有移动，对吧？每一次画的结果呢？是一样的。那接下来我们要做的事情就是让这些点移动起来。怎么移动呢？我们找到点啊，每个点呢，它可以移动的，既然要移动，就是不是需要速度，对不对？我们定义两个速度啊，一个是横向的速度， 比方说五十吧，每秒钟运行五十个像素，呃，然后是纵向的速度，每秒钟向下运行五十个像素。好，有了速度过后呢，还需要一个时间啊，就是上一次化的时间叫做 last 做 time， 对 吧？上一次化的时间，那么后边的每一次化了过后呢，我要把这个时间给他记录一下，因为只有有了速度和时间，我才能算距离嘛。 那么每一次画的时候呢，我就判断一下啊，上一次做画的时间有没有啊？如果说没有的话，那就是你第一次画，第一次画我就不管他了，如果说有的话，是不是上一次画跟现在已经经过了一段时间了对不对？那么我们就要重新去定义他的位置。 基本逻辑就是个逻辑，代码写出来没技巧，其实很多你们觉得复杂的东西啊，看上去好像下不了手，但是你正儿八经写出来的话，代码其实很简洁的，知识其实就是这一知识。你说这里面用到了啥新知识呢？没啥新知识。 所以因此呢，咱们做开发啊，两个层面，一个是知识，一个是能力。知识不够呢，你是没法下手的。你能力不够呢，也没法下手，你光有一些工具，但是呢，你用不起来，不会用，那也解决不了问题， 我要培养知识，锻炼能力，好好来看我的大师课。大师课是完全免费的哈，在这个课程里边呢，我既讲了前端所有的核心知识，同时呢也通过一些相关案例告诉同学们遇到一些复杂问题的时候该如何去分析和分解。而且整个大师课里边还涉及到大量的前端核心比面试题，以及我给予这些比面试题的顶级解读。 什么叫顶级解读？就这些核心比面试题，一旦在比面试环节里面遇到了，这是大概率的事件，一旦遇到过后，你把我给你的答案拿出去说，你不要说百分之百的还原了，你就能还原我答案的百分之七八十都足以形成压倒性的优势， 因为别人是无论如何说不出这样答案的。那这些核心比面试题你能拉开巨大的差距，这场比面试基本上就稳了。所以这些问题比面试环节一旦问到了你只要看过大师课你就可以想着怎么去谈薪资了。有没有这样夸张的小伙你看了这个课你就知道了 关键是这个课呢目前可以免费领哈。怎么领？在咱们账号主页点击头像进入账号主页点击提示领取。完事了啊。好，那么在这里呢我们要干嘛？更新位置了是吧？怎么更新是不是要算距离啊？一个是横向的移动距离 xds 啊，等于啥呢？等于横向的速度乘以啥？乘以时间是吧那个时间是不是要算出来时间等于啥？等于当前时间减去之前的时间再除以一千所以换算成秒对吧？经过的秒数 然后呢这样可以算出横向距离也可以算出什么横向距离然后新的 x 和新的 y 是 不是可以出来了等于啥之前的 x 加上了个横向距离 y 也是一样对吧然后呢把 x 和 y 又重新放进去这样子不就运动了吗对吧 x 和 y 一 变那后面画的时候是不是按照新的位置去画的？好保存咱们看一下呢刷新你看 是不是整个星空所有点都跟着在移动对不对？而连线呢连线是点和点之间的连线点移动是不是连线就跟着动了对吧？只不过呢目前呢所有点呢移动呢它的速度是完全一样的因此呢就整体往右往下移动了。那如果说你要做成一个差异化的效果的话那就把速度给他控制一下不就完了吗？ 速度的话来一个随机啊。呃负的五十到五十之间随机那么玩呢也是一样好保存你看一下。那现在是不是就运动起来了啊？只不过如果说你再控制的清晰一点，他有个回弹效果，不然的话有些点就跑的很远了，是吧？ 那你如果要说回弹的话，就控制一下这个 x 和 y 的 极限就可以了。判断一下啊，如果说 x 到达左边缘或者是到达右边缘的话，那么我们就当速度反向啊， 横向的速度反向，其实这里呢，也可以乘一个啥？乘一个负一是吧？都是反向吧，那么 y 呢？也是一样的啊， y 也需要反向，对吧？好保存，你看一下是不是这个点运动到边缘他就会回弹，是吧？这个效果就出来了啊。