CSS变身快递扫描架，用代码打造灵动效果**

2023-12-02 16:21:16

导语

随着互联网时代的到来，前端技术在网页设计中扮演着越来越重要的角色。CSS作为前端技术中不可或缺的一部分，不仅负责网页的样式呈现，更能打造出令人惊叹的动态效果。本文将以一个独特的案例——快递扫描架为例，带领大家探索纯 CSS 实现的动画魅力。

效果拆解

快递扫描架动画效果主要分为以下几个部分：

底座移动： 模拟快递扫描架底座的左右移动。
包裹扫描： 展示包裹在扫描仪中的动态移动效果。
扫描线闪烁： 再现扫描仪扫描时的红光闪烁。

代码实现

1. 底座移动

#base {
  width: 200px;
  height: 50px;
  background: #000;
  animation: base-move 2s infinite alternate;
}

@keyframes base-move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

2. 包裹扫描

#package {
  width: 50px;
  height: 50px;
  background: #fff;
  animation: package-scan 2s infinite;
}

@keyframes package-scan {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

3. 扫描线闪烁

#scanline {
  width: 100%;
  height: 1px;
  background: #f00;
  animation: scanline-blink 1s infinite;
}

@keyframes scanline-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}