小知識，大挑戰！本文正在參與“程式設計師必備小知識”創作活動。

有趣的前端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; }

接下來，儲存程式碼，重新整理頁面。一個動態的傳送快遞掃描架就完成啦！