聊天对话的跳点

Question

我目前正在构建一个基于网络的聊天机器人。作为聊天机器人的一部分，我实现了指示输入的跳点，如下所示：

CSS文件

    .jumping-dots span {
      position: relative;
        margin-left: auto;
        margin-right: auto;
      animation: jump 1s infinite;
    }
    .jumping-dots .dot-1{
      background-color: #ED49FE;
            width:12px;
            height:12px;
            border-radius:50%;
            margin-right:3px;
            
      animation-delay: 200ms;
    }
    .jumping-dots .dot-2{
      background-color: #ED49FE;
            width:12px;
            height:12px;
            border-radius:50%;
            margin-right:3px;
      animation-delay: 400ms;
    }
    .jumping-dots .dot-3{
        background-color: #ED49FE;
                width:12px;
            height:12px;
            border-radius:50%;
            margin-right:3px;
      animation-delay: 600ms;
    }
    
    @keyframes jump {
      0%   {bottom: 0px;}
      20%  {bottom: 5px;}
      40%  {bottom: 0px;}
    }

HTML 文件

<div class="my message">
<span class="jumping-dots">
  <span class="dot-1">.</span>
  <span class="dot-2">.</span>
  <span class="dot-3">.</span>
</span>
</div>

我的问题是，这些点在某种程度上无法正确显示，如下图所示（它们不是圆形的，并且点内有一个黑点）：

我的错误在哪里？

其次，我想使用以下代码以编程方式删除点：

var insertedContent = document.querySelector(".jumping-dots");
if(insertedContent) {
    insertedContent.parentNode.removeChild(insertedContent);
}

不幸的是，这并不能消除所有内容（仍然保留一小部分点）。为什么？

Answer 1

点不是圆形的原因是因为 span HTML 元素默认设置为内联显示。这意味着该元素只会占用显示文本所需的空间。您无法为内联显示的元素设置宽度和高度。

尝试将 .jumping-dots span 类设置为内联块显示。这还允许您从元素内部删除句点而不使其消失。跳跃点的新代码应如下所示：

.jumping-dots span {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  animation: jump 1s infinite;
  display: inline-block;
}

.jumping-dots .dot-1 {
  background-color: #ED49FE;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  animation-delay: 200ms;
}

.jumping-dots .dot-2 {
  background-color: #ED49FE;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  animation-delay: 400ms;
}

.jumping-dots .dot-3 {
  background-color: #ED49FE;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  animation-delay: 600ms;
}

@keyframes jump {
  0% {
    bottom: 0px;
  }
  20% {
    bottom: 5px;
  }
  40% {
    bottom: 0px;
  }
}

<div class="my message">
  <span class="jumping-dots">
  <span class="dot-1"></span>
  <span class="dot-2"></span>
  <span class="dot-3"></span>
  </span>
</div>