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

最新推荐文章于 2025-03-14 17:38:22 发布

fern_ok

最新推荐文章于 2025-03-14 17:38:22 发布

阅读量1k

点赞数

分类专栏： css 文章标签：前端 css html

原文链接：https://juejin.cn/post/7020612835948363812

版权

css 专栏收录该内容

3 篇文章

订阅专栏

看到上面这个动态效果，是不是会认为它是个物流扫描的动画效果呢。实际上不是的哦，这是一个纯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;
}

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

5.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快递扫描架</title>
</head>

<body>
    <div></div>
</body>
<style>
    div {
        position: relative;
        height: 400px;
        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-size: 200px 70px, 290px 11.5%, 200px 7px, 100px 30px, 200px 7px, 200px 10%;
        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;
        animation: moveDiv 2000ms linear infinite;
    }

    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;
        animation: moveAfter 2000ms linear infinite;
    }

    @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)
        }
    }
</style>

</html>