Html 简单骰子滚动效果-css动画

我正在尝试使用HTML符号制作简单的掷骰子效果。 我怎样才能重复那个动画

我不想使用JS-可能吗

我知道我可以把它放在iframe元素上，并在6秒后刷新它

寻找简单的css解决方案，我错过了

css部分：

.dice { /* HTML symbols */
  font-size: 100px;
  font-weight: 800;
  position: fixed;
  opacity: 0;
}
.dice:nth-child(1n) {animation: rolling 1s linear 1s 1 alternate;}
.dice:nth-child(2n) {animation: rolling 1s linear 2s 1 alternate;}
.dice:nth-child(3n) {animation: rolling 1s linear 3s 1 alternate;}
.dice:nth-child(4n) {animation: rolling 1s linear 4s 1 alternate;}
.dice:nth-child(5n) {animation: rolling 1s linear 5s 1 alternate;}
.dice:nth-child(6n) {animation: rolling 1s linear 6s 1 alternate;}
@-webkit-keyframes rolling {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

这是HTML：

<div class="roll">
  <span class="dice">&#9856;</span>
  <span class="dice">&#9857;</span>
  <span class="dice">&#9858;</span>
  <span class="dice">&#9859;</span>
  <span class="dice">&#9860;</span>
  <span class="dice">&#9861;</span>
</div>

⚀
⚁
⚂
⚃
⚄
⚅

.dice{/*HTML符号*/
字体大小：100px；
字号：800；
}
.骰子：：之后{
内容：''；
动画：滚动6s线性无限；
}
@关键帧滚动{
0%{内容：'\2680'；}
20%{内容：'\2681'；}
40%{内容：'\2682'；}
60%{内容：'\2683'；}
80%{内容：'\2684'；}
100%{内容：'\2685'；}
}

---

嗯，我在预览中看不到任何东西，这对我来说很有用。在FF和铬上。可能字形有问题？尝试更改此

@keyframes滚动{0%{content:'1'；}20%{content:'2'；}40%{content:'3'；}60%{content:'4'；}80%{content:'5'；}100%{content:'6'；}

Mea culpa:（这只适用于FF和Chrome-。他们发布了一个例外，如果要在不同的浏览器上工作，您需要使用JavaScript。确实做得很好