四宫格效果 css_手把手教你实现移动端九宫格抽奖(超详细教程)

导读

❝

抽奖效果有很多种, 常见的有转盘、九宫格、随机码等等, 那么今天来做一个九宫格的移动端抽奖效果

❞

效果展示

效果展示

适合人群

有HTML,CSS,JS基础即可

功能分析

1. 基于移动端的九宫格抽奖
2. 抽奖方式应为「跑马灯布局」进行抽奖
3. 旋转速度应为「由快到慢」的一个效果
4. 旋转到某个盒子中,盒子状态应该「高亮显示」
5. 可「指定中奖奖品」

预备工作

1. 新建HTML,CSS,JS文件
2. 因为我们要实现的九宫格抽奖是基于「移动端」的, 所以需要在HTML的head中添加如下代码

"viewport" content="width=device-width, initial-scale=1.0">

3. 而在CSS中的代码,我们只需要清除默认的边距即可

* {
     
    padding: 0;
    margin: 0;
}

4. 最后新建一个images的文件夹, 并且把图片全部放进去

❝

"图片和源码我会放在公众号里面, 只需要在公众号回复'「九宫格抽奖」'即可获取 "

❞

布局分析

我们需要什么样子的布局?

• 第一种布局方式叫「自然布局」
• 第二种布局方式叫「跑马灯布局」
• 「很明显可以看得出来,我们需要的是第二种抽奖方式」

跑马灯效果

• 「跑马灯布局」就是给每一个方块经过的时候加上「遮罩」,使用定时器去控制
• 如果选择「自然布局」,那么转动的顺序会是1,2,3,6,9,8,7,4去转动,不符合需求
• 如果选择「跑马灯布局」,那么转动的顺序会是1,2,3,4,5,6,7,8,去转动, 符合需求

跑马灯

实现布局