小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-快递扫描架

看到上面这个动态效果，是不是会认为它是个物流扫描的动画效果呢。实际上不是的哦，这是一个纯css完成的animation特效，完全不带任何形式的图片。 是不是很不可思议，明明看起来都包裹和中间的扫描框都像是图片。 下面我们来复刻一下吧。

1.首先定义父容器。

div{
    position: relative; 
    height: 400px;
}

这里我们只定义容器高度，宽度直接满屏

2.定义传送条和物流包裹

这里是比较神奇的地方了，在完成所有的设置之前，看到的都是杂乱无章的效果。

background-image: 
            //物流包裹渐变色
            linear-gradient(to right,transparent 30%,#d2b48c 30%,#d2b48c 47%,#ddc7a9 47%,#ddc7a9 53%,#d2b48c 53%,#d2b48c 70%,transparent 70%),
            //传送带正中心预留阴影
            linear-gradient(to right,transparent,rgba(0,0,0,0.3) 20%,rgba(0,0,0,0.3) 80%,transparent),
            //传送带链条上端
            linear-gradient(45deg,#bbb 22%,#888 22%,#888 25%,#bbb 25%,#bbb 75%,#888 75%,#888 78%,#bbb 78%),
            //传送带中心链接处圆点
            radial-gradient(circle,#888 8px,rgba(255,255,255,0.9) 8px,rgba(255,255,255,0.9) 11px,transparent 11px),
            //传送带链条下端
            linear-gradient(-45deg,#bbb 22%,#888 22%,#888 25%,#bbb 25%,#bbb 75%,#888 75%,#888 78%,#bbb 78%),
            //传动带中心链接
            linear-gradient(to bottom,#666 50%,#555 50%);

background-image 设置完成后得到下图基本素材都存在了。

然后开始设置background-size，代码如下

div{
    background-size: 200px 70px,290px 11.5%,200px 7px,100px 30px,200px 7px,200px 10%;
}

通过对background-image的色块设置size，我们得到了全屏平铺的下图

接着设置定位及背景重复

div{
    background-position: 50% 56.2%,50% 72.2%,0 65%,50% 71%,0 75%,0 72%; 
    background-repeat: repeat-x,no-repeat,repeat-x,repeat-x,repeat-x,repeat-x;
}

就得到了完整的物流传送带

3.定义扫描框

这里选择给父容器设置伪类并将其居中

 div:before, div:after {
        display: block;
        content: '';
        position: absolute;
    }

由于扫描框是不动的，但是物流包裹进入时是滑动的，因此这里将扫描框拆分成两部分。

静止部分（扫描框）

div:before {
        width: 200px;
        height: 202px;
        left: 50%;
        margin-left: -100px;
        top: 27%;
        background-image: 
            //框内阴影
            linear-gradient(165deg,rgba(255,255,255,0.15) 25%,transparent 25%),
            //框内底色
            linear-gradient(to right,#002525,#002525),
            //框外底部条
            linear-gradient(to right,transparent 20%,#1aa093 20%,#1aa093 40%,transparent 40%,transparent 60%,#1aa093 60%,#1aa093 80%,transparent 80%),
            //框下部分圆点
            radial-gradient(circle,#1ba99b 50%,transparent 50%),
            radial-gradient(circle,#1ba99b 50%,transparent 50%),
            radial-gradient(circle,#1ba99b 50%,transparent 50%),
            //外框底色
            linear-gradient(to bottom,#40e0d0 90%,#21ccbb 90%);
        background-size: 164px 130px,170px 130px,100% 10px,16px 16px,16px 16px,16px 16px,100% 100%;
        background-position: 50% 27%,50% 22%,50% 100%,70% 85%,80% 85%,90% 85%,0 0;
        background-repeat: no-repeat;
        border-radius: 10px 10px 3px 3px;
        border-top: 3px solid #21ccbb;
}

得到下图扫描框

动态部分（物流包裹图）

div:after {
        width: 170px;
        height: 130px;
        left: 50%;
        margin-left: -85px;
        top: 38%;
        background-image:
            //左侧标识组合1
            linear-gradient(to right,white,white),
            //左侧标识组合2
            repeating-linear-gradient(to bottom,white,white 2px,transparent 2px,transparent 12px),
            //包裹框整体底色
            linear-gradient(to right,transparent 30%,#10635a 30%,transparent 40%,transparent 60%,#10635a 70%,transparent 70%),
            //三排正方形格子颜色
            linear-gradient(to right,transparent 35%,#1aa093 34%,#1aa093 44%,transparent 44%,transparent 45%,#21ccbb 45%,#21ccbb 55%,transparent 55%,transparent 56%,#168a7f 56%,#168a7f 65%,transparent 65%),
            linear-gradient(to right,transparent 35%,#1eb6a7 34%,#1eb6a7 44%,transparent 44%,transparent 45%,#1aa093 45%,#1aa093 55%,transparent 55%,transparent 56%,#21ccbb 56%,#21ccbb 65%,transparent 65%),
            linear-gradient(to right,transparent 35%,#168a7f 34%,#168a7f 44%,transparent 44%,transparent 45%,#1aa093 45%,#1aa093 55%,transparent 55%,transparent 56%,#1eb6a7 56%,#1eb6a7 65%,transparent 65%),
            //包裹框整体前色
            linear-gradient(to right,transparent 30%,#003e3f 30%,#003e3f 70%,transparent 70%); 
        background-size: 2px 50px,8px 50px,200px 70px,200px 18px,200px 18px,200px 18px,200px 70px;
        background-position: 15px 40px,16px 40px,50% 56%,50% 40%,50% 58%,50% 76%,50% 56%;
        background-repeat: no-repeat,no-repeat,repeat-x,repeat-x,repeat-x,repeat-x,repeat-x; 
}   

得到下面这个小盒子

将所有效果组合起来得到下图

此时物流扫描的传送带、物流包裹、扫描仪、扫描包裹图 就都完成了。不过此时还是静态的，下面我们让它动起来吧！

4.添加动态特效

定义特效代码

@keyframes moveDiv {
        to {
            background-position-x: calc(50% + 200px),50%,200px,50%,-200px,0
        }
    }
    @keyframes moveAfter {
        to {
            background-position-x: 15px,16px,calc(50% + 200px),calc(50% + 200px),calc(50% + 200px),calc(50% + 200px),calc(50% + 200px)
        }
    }

将特效指定给对应的盒子

div{
    animation: moveDiv 2000ms linear infinite;
}
div:after {
    animation: moveAfter 2000ms linear infinite;
}

接下来，保存代码，刷新页面。一个动态的传送快递扫描架就完成啦！