有趣的前端css特效-快遞掃描架
小知識,大挑戰!本文正在參與“程式設計師必備小知識”創作活動。
有趣的前端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;
}
接下來,儲存程式碼,重新整理頁面。一個動態的傳送快遞掃描架就完成啦!
- 常用CSS基礎樣式(二)
- Android Java程式碼優化(二)
- Android Java程式碼優化(一)
- TalkBack 原始碼分析之TalkBackService
- Android View和ViewGroup的關係
- 最後的一畫素
- Android 可拖動的文字
- 和硬體除錯那些事
- Android常用的工具類TextUtils
- Android使用自定義字型
- 提高app的響應能力-佈局優化
- Android中Dalvik、ART區別與聯絡
- 使用DialogFragment代替Dialog
- AndroidStudio動態模板
- Android 使用SwitchButton
- AndroidStudio 如何執行java main方法
- Android 自定義提示
- 引用拷貝、淺拷貝、深拷貝
- 換個日誌列印類吧
- Android輸入法彈窗的優雅處理