这个项目预览效果:https://leeseean.github.io/sic-bo
布局
布局采用 html+css 布局,桌面背景使用图片,里面的选号不使用图片全部采用 css 编写,盅和里面的骰子采用图片。
动画效果
动画效果主要两个,
- 1 个是开奖后盅摇骰子,这个使用 css3 的 keyframe 动画,用到了 scale,rotate,骰子 div 随机变换位置和背景图片,直至最后更换为开奖选号图片。
- 一个是筹码飞出去的效果,这里用到了 canvas,难点在于计算坐标和适配屏幕,计算选号坐标,然后得到飞出去的位置坐标。当屏幕收缩放大的时候可能位置会跑偏,因此还要主要适配屏幕。
主要是这么点,是个细活,源码地址:https://github.com/leeseean/s…