用于聊天對話的跳點-有解無憂

我目前正在構建一個基于網路的聊天機器人。作為聊天機器人的一部分，我實作了指示輸入的跳點，如下所示：

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);
}

不幸的是，這并沒有洗掉所有內容（仍然有一小部分點仍然存在）。為什么？

uj5u.com熱心網友回復：

點不是圓形的原因是因為 span HTML 元素默認設定為行內顯示。這意味著元素只會占用顯示文本所需的空間。您不能為行內顯示的元素設定寬度和高度。

嘗試將 .jumping-dots 跨度類設定為行內塊顯示。這也將允許您從元素內部洗掉句點而不使其消失。跳點的新代碼應如下所示：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/490218.html

標籤：html css

上一篇：無法解決FreeCodeCamp.org第12步中的練習

下一篇：在表格單元格上方放置一個按鈕并垂直對齊單元格中的文本