在通讯应用和聊天界面中，当你正在与对方交谈时对方正在输入一条信息，会有一个小的气泡动画或者文案提示。本文将探讨使用现代 CSS 来实现这一动画效果，首先会实现一个 Blink 效果的动画，然后实现一个波浪效果动画，最后实现一个语音气泡效果。

1.效果预览

1）Blink 效果：

2）Wave 效果：

3）语音气泡效果：

2.实现方案

2.1.快速创建页面和容器

通过 html:5 和 div.container>(div.dot)*3 快速创建页面及容器。

<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

2.2.增加基础样式

1）容器居中：

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
}

2）容器样式：

注意：此处使用了现代CSS 原生嵌套（参考链接：）

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;

  background: #e2e8f0;
  border-radius: 9999px;
  padding: 1rem;
  .dot {
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background: #93a2b7;
  }
}

2.3.实现动画

1）Blink 效果：

核心思想是通过给dot 元素设置 opacity 设置属性来改变其透明度，同时对 3 个 dot 的透明度变化设置不同的动画延迟 animation-delay 属性来实现闪烁的效果。

.container {
  .dot {
    opacity: 0;
    animation: blink 1s infinite;
    &:nth-child(1) {
      animation-delay: 0.3333s;
    }
    &:nth-child(2) {
      animation-delay: 0.6666s;
    }
    &:nth-child(3) {
      animation-delay: 0.9999s;
    }
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}

2）Wave 效果：

核心思想：给 dot 元素增加 transform 属性，设置 translateY 的值将目标元素从下至上垂直重新定位，同时在动画关键帧 keyframes 中对颜色进行调整。

  .container {
    .dot {
      animation: wave 1s infinite;
    }
  }
  @keyframes wave {
    0% {
      transform: translateY(0px);
      background: rgba(148 163 184 / 0);
    }
    25% {
      transform: translateY(-0.25rem);
      background: rgba(148 163 184 / 0.8);
    }
    50% {
      transform: translateY(0px);
      background: rgba(148 163 184 / 0);
    }
    75% {
      transform: translateY(0.25rem);
      background: rgba(148 163 184 / 0.8);
    }
    100% {
      transform: translateY(0);
      background: rgba(148 163 184 / 0);
    }
  }

2）语音气泡效果：

语音气泡是以可视化方式显示对话或思想的一种流行而有效的方法。你可能在漫画、卡通、广告和社交媒体文章中见过它们。它们为设计增添了幽默、情感和个性，同时也为观众提供了语境。此外，语音气泡布局还可以将文字较多的设计分割开来，使其更加吸引人。

核心思想：在 wave 效果的基础上，对 .contianer 容器增加 ::before 和 ::after 两个伪元素来实现左下角的圆圈，同时动画中增加对整个容器的放大和缩小 scale 动画，并采用 ease-out 函数。

.container {
  animation: 2s zoom infinite ease-out;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    background: rgb(226 232 240);
    bottom: 0;
    left: 0;
  }
  &::before {
    height: 1rem;
    width: 1rem;
    transform: translate(-0.125rem, 0.125rem);
  }
  &::after {
    height: 0.5rem;
    width: 0.5rem;
    transform: translate(-0.5rem, 0.5rem);
  }
  .dot {
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background: rgba(148 163 184 / 1);
    animation: wave 1.2s infinite;
    &:nth-child(1) {
      animation-delay: 0.4s;
    }
    &:nth-child(2) {
      animation-delay: 0.8s;
    }
    &:nth-child(3) {
      animation-delay: 1.2s;
    }
  }
}
@keyframes zoom {
  50% {
    transform: scale(1.1);
  }
}

如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！