抽奖九宫格

全篇共 1014 字。按500字/分钟阅读,预计用时 2.0 分钟。此篇想法总访问 22 次,今日访问 3 次。

图片源自网络

思路

1、面向对象,将奖品块视作状态与动作的集合。
2、8个奖品块包含两种视觉状态,默认样式与高亮样式。
3、数组存储这8种奖品的DOM引用,定时从第0个奖品依次遍历。
4、随机循环次数,既定抽奖结果。

布局

1、准备8种奖品的默认+高亮状态切图16张。
2、每1种奖品的两种状态为1组,如下:

...
<div data-state="" class="card">
  <img src="..." alt="这是默认状态的奖品">
  <img src="..." alt="这是高亮状态的奖品">
</div>
...

3、使用属性选择器控制显示奖品默认图或高亮图,如下:

.card[data-state=""] img:first-child {display: block;}
.card[data-state=""] img:last-child {display: none;}

.card[data-state="1"] img:first-child {display: none;}
.card[data-state="1"] img:last-child {display: block;}

动画

1、霓虹灯闪烁动效。

.blink_panel {
  -webkit-animation: blink_panel 600ms linear infinite;
  animation: blink_panel 600ms linear infinite;
}
@-webkit-keyframes blink_panel {
  0% {opacity: 0;}
  10% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes blink_panel {
  0% {opacity: 0;}
  10% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 0;}
  100% {opacity: 0;}
}
发布日期 » 2019年4月11日 周四
原创声明 » 请勿复制转载,谢谢配合。
Airglass.js核心库
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
运维
可视化
生活自有“道”理
视觉设计、用户体验
陈帅华的微信二维码