聊天中的跳跃点

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元素被设置为内联显示。这意味着元素将只占用显示文本所需的空间。不能将宽度和高度设置为内联显示的元素。

尝试将.j唱点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>

​