跳动小球动画: 为你的语音输入界面增添活力

2023-07-13 11:17:27

CSS3 动画：让语音输入界面跃然生动

在现代智能手机时代，语音输入已经成为一种广泛应用的交互方式。为了提升用户体验，语音输入界面的设计至关重要，而 CSS3 动画的出现为界面设计师们带来了令人振奋的可能性。

打造动感十足的小球

单个小球的无限跳动

第一步，让我们创建一个单个小球的跳动动画。设想小球从顶部出发，落至底部，然后再回到顶部，不断循环往复。要实现这种效果，我们可以借助相对定位和 CSS3 的关键帧动画。

HTML 结构

<div id="ball"></div>

CSS 样式

#ball {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff0000;
  animation: ball-jump infinite 2s linear;
}

@keyframes ball-jump {
  0% {
    top: 0;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 0;
  }
}

只需几行代码，我们就赋予了小球永不疲倦的跳跃能力。

多个小球的协同律动

接下来，让我们让多个小球协同律动，带来更震撼的视觉体验。

HTML 结构

<div id="balls-container">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>

CSS 样式

#balls-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff0000;
  animation: ball-jump infinite 2s linear;
}

.ball:nth-child(2) {
  animation-delay: 0.5s;
}

.ball:nth-child(3) {
  animation-delay: 1s;
}

@keyframes ball-jump {
  0% {
    top: 0;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 0;
  }
}