HTMLとCSSで作るスロットマシーン

■ はじめに

🔵、💖、🟫などの記号がスロットマシーンのように上から下へと流れるHTMLとCSSです。

■ 表示例

• 🔵
  💖
  🟫
  ⭐
  🔵
  💖
  🟫
  ⭐
  🔵
  💖
• 💖
  🟫
  ⭐
  🔵
  💖
  🟫
  ⭐
  🔵
  💖
  🟫
• 🟫
  ⭐
  🔵
  💖
  🟫
  ⭐
  🔵
  💖
  🟫
  ⭐

■ ソースコード(HTML)

<div class="slot"><ul>
<li>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖</li>
<li>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫</li>
<li>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐</li>
</ul></div>

■ ソースコード(CSS)

.slot {box-sizing:content-box;display:flex;width:calc(5px * 2 + 20px * 3 + 10px * 2 + 7px);height:calc(20px * 1.5 * 3 + 7px);margin:0;padding:0;border:solid 10px #ecddab;border-radius:5px;overflow:hidden;}
.slot ul{display:flex;margin:5px;padding:0;animation:slot 0.4s linear infinite;}
.slot li{list-style:none;width:20px;margin:0 10px 0 0;padding:0;font-size:20px;font-family:"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,sans-serif;line-height:1.5;}
.slot li:last-child{margin:0;}
@keyframes slot{0%{transform:translateY(-200%);}to{transform:translateY(0%);}}

■ 回転が停止している時の表示例

• 🔵
  💖
  🟫
  ⭐
  🔵
  💖
  🟫
  ⭐
  🔵
  💖
• 💖
  🟫
  ⭐
  🔵
  💖
  🟫
  ⭐
  🔵
  💖
  🟫
• 🟫
  ⭐
  🔵
  💖
  🟫
  ⭐
  🔵
  💖
  🟫
  ⭐