Question

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

我不想使用JS - 是否可能？
我知道我可以把它放在iframe元素上并在6秒后刷新它等。

寻找我想念的简单css解决方案。

css part：

.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>

这对你好吗？

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

1 个答案: