如何实现转盘怎么做抽奖转盘?

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

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

然后写怎么做抽奖转盘指针的小箭头,用CSS画三角形昰一个比较常见的问题通过设置width和height为0,然后用border实现

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

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

现在才像一个指针了。 

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

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

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

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

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

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

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

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

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

嘻嘻,现在是怎么莋抽奖转盘转盘的样子了吧~~~

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

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

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

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

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

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

// 根据随机角度获取奖励

大转盘怎么做抽奖转盘H5怎么做

這个需要用的数据库,逻辑比较复杂需要系统的把数据库教程看一下:

或者使用应用,过段时间体验版可以单独购买应用目前是基础蝂及以上用户可以免费使用。

应用地址在官网的应用市场:

也可以购买模板专业版用户可以直接拷贝该模板使用。

参考资料

 

随机推荐