移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo
前言
本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局....在制作大转盘抽奖的时候,一般使用到的插件是jQueryRotate这款插件.网上有很多可以参考的教程.不再赘述....这篇博文的意义是,一般情况下,这些奖项它都是直接做到图片上去了.当然,这样也没有什么不行,只是如果要修改奖项的话,还需要去修改一下图片,甚是繁琐.
所以,本文,是讲,如何实现CSS布一个大转盘的局....是转盘中的旋转部分.本身没什么说的.和父盒子一样大,left: 0;top: 0;即可.关键是里面的奖项
.prize是里面的奖项.我们宽度设定为转盘一格的宽度,而高度设置为和父元素一样高.左右的位置为居中....着重两点:
sass循环的时间.如上,使用 for 循环.