如何用CSS制作一个引人入胜的手机充电动画特效

可以尝试以下代码，其中使用了CSS3中的@keyframes规则定义动画，以及transform属性实现元素的移动和旋转。

HTML：

<div class="battery">
  <div class="charging"></div>
  <div class="battery-content"></div>
</div>

CSS：

.battery {
  width: 60px;
  height: 100px;
  position: relative;
  margin: 50px auto;
  border: 2px solid #ddd;
  border-radius: 5px;
  background: linear-gradient(to top, #f2f2f2 50%, transparent 50%);
}

.charging {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: #ffc107;
  animation: charging 2s infinite ease-in-out;
}

.battery-content {
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #ffc107;
  animation: fill 2s infinite ease-in-out;
}

@keyframes charging {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(30px) rotate(45deg);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fill {
  0% {
    height: 0;
  }
  50% {
    height: 25px;
  }
  100% {
    height: 50px;
  }
}

这段代码中，.battery表示电池外壳，.charging表示充电的小圆点，.battery-content表示电池内容物。

其中，.charging元素使用了animation属性和charging动画，让其水平来回移动，并在中间完成一个旋转动作；.battery-content元素使用了animation属性和fill动画，让其高度从0到50px逐渐增加。最终的效果就是一个充电电池的动画特效。

你可以将这段代码复制到一个HTML文件中查看效果，或者在你的网页中使用相应的CSS类名。