徽章颤动

徽章颤动是一种常用的界面互动效果，通过对徽章图标进行轻微的抖动动画，来提高用户的注意力和体验感。徽章颤动常常用于未读消息提醒、新消息到来提醒等场景。

实现原理

徽章颤动实现的关键在于对徽章图标的抖动动画。在CSS中，可以通过transform属性对元素进行旋转、缩放、移动等变换操作。而徽章颤动就是通过对徽章图标进行微小的旋转变换来实现的。

实现徽章颤动的步骤如下：

1. 定义徽章样式，例如：

.badge {
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center; 
}

2. 定义徽章颤动动画，例如：

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(3deg);
  }
  30% {
    transform: rotate(-2deg);
  }
  40% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

3. 将徽章图标应用动画，例如：

.badge {
  animation: shake 0.5s ease-in-out infinite;
}

应用场景

徽章颤动常用于未读消息提醒、新消息到来提醒等场景，例如：

<div class="message-icon">
  <i class="fa fa-envelope"></i>
  <span class="badge">5</span>
</div>

.badge {
  animation: shake 0.5s ease-in-out infinite;
}

在以上代码中，通过添加徽章颤动动画，来提醒用户有新的未读消息。同时，也可以通过修改动画的持续时间、速度等参数，来控制徽章颤动效果的强度。