在通讯运用和谈天界面中，当你正在与对方交谈时对方正在输入一条信息，会有一个小的气泡动画或者文案提示。本文将磋商利用当代 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); }}
如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！
