两种方式实现CSS动画，html实体字符

以下是使用HTML实体字符实现CSS动画的一个简单示例：

HTML:




<div class="loading">
  <!-- 使用HTML实体字符来创建加载动画 -->
  <span>加载中</span>
  <span class="dot">
    &#8226;
    &#8226;
    &#8226;
  </span>
</div>

CSS:




.loading {
  text-align: center;
}
 
.dot {
  display: inline-block;
  animation: blink 1.4s infinite both;
}
 
.dot:nth-child(2) {
  animation-delay: 0.2s;
}
 
.dot:nth-child(3) {
  animation-delay: 0.4s;
}
 
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

这段代码会创建一个简单的点状动画，类似于传统加载器，每个点以不同的延迟开始闪烁。

两种方式实现CSS动画，html实体字符

评论已关闭

推荐阅读