html - 简单的骰子滚动效果 - CSS 动画

Question

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

1. 我不想使用 JS - 这可能吗？
2. 我知道我可以将它放在 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>

Answer 1

.dice { /* HTML symbols */
  font-size: 100px;
  font-weight: 800;
}

.dice::after {
  content:'';
  animation: rolling 6s linear infinite;
}

@keyframes rolling {
  0% {content:'\2680';}
  20% {content:'\2681';}
  40% {content:'\2682';}
  60% {content:'\2683';}
  80% {content:'\2684';}
  100% {content:'\2685';}
}

  <span class="dice"></span>

这对你来说没问题吗？