css sup上标动态显示

CSS sup标签可以很方便地实现上标的效果，增强文本的可读性。而利用动态效果将sup标签中的内容逐渐显示出来，则可以给网页增添不少活力。

代码如下：
sup {
  vertical-align: super;
  font-size: 0.8rem;
  animation: showSup 2s steps(10);
  animation-fill-mode: forwards;
}
@keyframes showSup {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

上面的代码首先定义了sup标签的样式，其中vertical-align属性用于将上标对齐，font-size属性则用于调整上标的大小。接下来，使用animation属性定义动画，具体来说是定义showSup动画，它持续2秒，通过steps函数将动画分成了10步。animation-fill-mode属性则用于保留动画效果，使得在动画结束后，sup标签中的内容被一直保留下来。

最后是showSup动画的定义，它使用from和to两个关键字，分别表示动画从初始状态到结束状态。在初始状态下，sup标签中的内容被设置为不可见，直至动画结束后才显示。

需要注意的是，为了使用sup标签动态显示的功能，HTML代码中需要额外使用span标签来包裹sup标签。例如：

HTML代码如下：
这是一个含有动态上标效果的sup标签演示。

通过这种方式，可以让sup标签中的内容在动画效果的呈现下逐渐显示出来，增强网页的交互性。