使用@keyframes 动画，以及 animation 属性来启用动画。（电话图片持续晃动）

该元素添加一个名为 shaking 的样式类。

 <img src="@/assets/homeImgs/dianhau.png" alt=""  class="shaking">

 CSS 中的 @keyframes 定义了一个名为 shake 的动画，该动画将图片元素从 0 度旋转到 10 度，再到 -10 度，再到 10 度，最后回到 0 度。这个动画会在后面用于定义样式类

  .shaking {
      width: 30px;
      height: 30px;
      animation: shake 0.5s infinite alternate;
    }

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

animation: shake 0.5s infinite alternate; 这行代码的含义如下：

• animation 是一个 CSS 属性，用于指定要应用到元素的动画效果。
• shake 是动画的名称，它对应之前在 @keyframes 中定义的动画。
• 0.5s 是动画的持续时间，表示动画效果从开始到结束需要花费 0.5 秒的时间。
• infinite 表示动画循环无限次播放，即动画会一直持续下去，不会停止。
• alternate 表示动画在每次循环时会在正向和反向之间交替播放，即元素会来回震荡。

因此，animation: shake 0.5s infinite alternate; 的含义是将名为 shake 的动画应用到元素上，动画持续时间为 0.5 秒，动画会无限循环播放，并且在每次循环时会在正向和反向之间交替播放。这样就实现了让元素晃动的效果。